如何在 CSS 中对齐两列均为直线的文本?

htmlcssweb developmentfront end technology更新于 2025/1/7 22:04:17

CSS(层叠样式表)是一种用于指定 HTML 文档外观和格式的样式表语言。CSS 将内容呈现与网页结构分离，让您能够控制网站的布局、颜色、字体和其他样式。

您可以使用 CSS 的 display: table 属性构建一个类似于表格的结构，以便在两列均为直线的情况下对齐 CSS 中的文本。然后，为了正确对齐文本，在使用 display: table-cell 属性时，请将每列的垂直对齐属性设置为 top 或 bottom。

方法

以下是一些在 CSS 中对齐文本的典型方法 -

使用 text-align 属性
使用 display 属性
使用 float 属性

现在让我们通过示例详细了解每种方法。

方法 1:使用"text-align"属性

在 CSS 中对齐文本的第一种方法是使用"text-align"属性，其中两列都是直线。容器元素内的文本可以使用 text-align 属性进行对齐。它接受诸如居中、左对齐和两端对齐等值。

示例

在下面的示例中，我们将学习如何使用"text - align"属性在 CSS 中对齐文本

步骤 1 − 在 HTML 中创建一个容器元素，例如 div −

<div class="container">
   <!-- Your content goes here -->
</div>

步骤 2 − 为容器元素内的两列创建两个子元素 −

<div class="container">
   <div class="left-col">
      <!-- Left column content goes here -->
   </div>
   <div class="right-col">
      <!-- Right column content goes here -->
   </div>
</div>

步骤 3 − 容器和列元素应添加 CSS 样式 −

.container {
   display: flex;
   justify-content: space-between;
}
.left-col {
   width: 49%;
   text-align: left;
}
.right-col {
   width: 49%;
   text-align: right;
}

步骤 4 − 用内容填充列元素 −

<div class="container">
   <div class="left-col">
      <p>Left column content</p>
   </div>
   <div class="right-col">
      <p>Right column content</p>
   </div>
</div>

步骤 5 − 您可以通过在计算机浏览器中预览结果来观察文本以两列垂直排列的情况。

步骤 6 − 最终代码如下所示 −

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
      .container {
         display: flex;
         justify-content: space-between;
      }
      .left-col {
         width: 49%;
         text-align: left;
      }
      .right-col {
         width: 49%;
         text-align: right;
      }
   </style>
</head>
<body>
   <div class="container">
      <div class="left-col">
         <p>Left column content</p>
      </div>
      <div class="right-col">
         <p>Right column content</p>
      </div>
   </div>
</body>
</html>

方法 2:使用"display 属性"

要建立灵活的布局，请将 display 属性设置为 flex 或 grid。使用 justify-content 和 align-items 属性，您可以管理元素在不同布局模式下的定位方式。

示例

在下面的示例中，我们将学习如何使用 display 属性在 CSS 中对齐文本

步骤 1 − 在 HTML 中创建一个容器元素，例如 div −

<div class="container">
   <!-- Your content goes here -->
</div>

步骤 2 − 为容器元素内的两列创建两个子元素 −

<div class="container">
   <div class="left-col">
      <!-- Left column content goes here -->
   </div>
   <div class="right-col">
      <!-- Right column content goes here -->
   </div>
</div>

步骤 3 − 容器和列元素应添加 CSS 样式 −

.container {
   display: flex;
   justify-content: space-between;
}
.left-col {
   width: 49%;
}
.right-col {
   width: 49%;
}

步骤 4 − 用内容填充列元素 −

<div class="container">
   <div class="left-col">
      <p>Left column content</p>
   </div>
   <div class="right-col">
      <p>Right column content</p>
   </div>
</div>

步骤 5 − 您可以通过在计算机浏览器中预览结果来观察文本以两列垂直排列的情况。

步骤 6 − 最终代码如下所示 −

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
      .container {
         display: flex;
         justify-content: space-between;
      }
      .left-col {
         width: 49%;
      }
      .right-col {
         width: 49%;
         text-align: right;
      }
   </style>
</head>
<body>
   <div class="container">
      <div class="left-col">
         <p>Left column content</p>
      </div>
      <div class="right-col">
         <p>Right column content</p>
      </div>
   </div>
</body>
</html>

方法 3:使用"float 属性"

使用 float 属性，元素可以浮动到其父容器的左侧或右侧。使用此属性可以创建多列对齐的文本，从而实现多列布局。

示例

在下面的示例中，我们将学习如何使用 Floot 属性在 CSS 中对齐文本。

步骤 1 − 在 HTML 中创建一个容器元素，例如 div −

<div class="container">
    <!-- 您的内容在此处显示 -->
</div>

步骤 2 − 在容器元素内为两列创建两个子元素 −

<div class="container">
   <div class="left-col">
      <!-- Left column content goes here -->
   </div>
   <div class="right-col">
      <!-- Right column content goes here -->
   </div>
</div>

步骤 3 − 容器和列元素应添加 CSS 样式 −

.left-col {
   width: 49%;
   float: left;
   text-align: left;
}
.right-col {
   width: 49%;
   float: right;
   text-align: right;
}

步骤 4 − 用内容填充列元素 −

<div class="container">
   <div class="left-col">
      <p>Left column content</p>
   </div>
   <div class="right-col">
      <p>Right column content</p>
   </div>
</div>

步骤 5 − 您可以通过在计算机浏览器中预览结果来观察文本以两列垂直排列的情况。

步骤 6 − 最终代码如下所示 −

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
      .left-col {
         width: 49%;
         float: left;
         text-align: left;
      }
      .right-col {
         width: 49%;
         float: right;
         text-align: right;
      }
   </style>
</head>
<body>
   <div class="container">
      <div class="left-col">
         <p>Left column content</p>
      </div>
      <div class="right-col">
         <p>Right column content</p>
      </div>
   </div>
</body>
</html>