用css怎么实现两端对齐？

在CSS中，你可以使用text-align: justify;属性来实现文本的两端对齐。这通常用于段落文本，使文本行在左右两侧都对齐，形成整齐的文本块。

以下是一个简单的示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>两端对齐示例</title>
<style>
  .justify-text {
    text-align: justify;
  }
</style>
</head>
<body>

<p class="justify-text">
  这是一个两端对齐的示例文本。你可以看到这段文本的左右两侧都是对齐的，形成了整齐的文本块。这种效果在排版中很常见，特别是在印刷品和正式的文档中。
</p>

</body>
</html>

在上面的示例中，我们为<p>元素添加了一个名为justify-text的类，并在CSS中为该类设置了text-align: justify;属性。这将使该段落的文本实现两端对齐。

请注意，当文本行较短或只有一行时，两端对齐的效果可能不明显。为了获得最佳效果，请确保文本有足够的长度以形成多行文本块。

posted @ 2025-01-18 09:37  王铁柱6  阅读(232)  评论(0)    收藏  举报