CSS 如何使两列文本对齐

一种名为CSS（层叠样式表）的样式表语言被用于指定HTML文档的外观和格式。通过将内容的表示与网页结构分离，CSS可以控制网站的布局、颜色、字体和其他样式。

当两列都是直的时候，您可以使用CSS的display: table属性构建一个类似表格的结构来对齐文本。然后，使用display: table-cell属性时，为每个列设置top或者bottom作为垂直对齐属性来适当对齐文本。

方法

以下是一些常用的在CSS中对齐文本的方法：

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

现在让我们详细看一下每种方法的示例。

方法1：使用”text-align”属性

第一种方法是使用”text-align”属性来对齐CSS中的文本，其中两个列都是直的。可以使用text-align属性来对容器元素内的文本进行对齐。它接受center、left和justify等值。

示例

在以下示例中，我们将学习如何使用”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 property”

要建立一个灵活的布局，请将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属性，可以使元素浮动到其父容器的左侧或右侧。可以使用它创建多列布局来对齐文本。

示例

在下面的示例中，我们将学习如何使用Float属性在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样式的容器和列元素 –

.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>