如何在CSS中对齐文本，使两列都保持直线？

百变鹏仔 3个月前 (09-21) #HTML

文章标签直线

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

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

方法

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

使用文本对齐属性
立即学习“前端免费学习笔记（深入）”；
使用 display 属性
使用浮动属性

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

方法一：使用“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>

第三步− 容器和列元素应添加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>

方法二：使用“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>

第三步− 容器和列元素应添加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>

第三步− 容器和列元素应添加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>

结论

无论是CSS中的text-align属性还是display属性都可以将文本对齐到两个直立的列中。display属性指示元素的布局，例如它应该显示为块级元素还是内联元素。

文章推荐

如何在CSS中对齐文本，使两列都保持直线？

方法

方法一：使用“text-align”属性

示例

方法二：使用“display属性”

示例

方法 3：使用“float 属性”

示例

结论

html代码是什么

值得一学的6个前端HTML+CSS特效

html怎么设置字体

怎么隐藏html标签

html怎么设置编码utf8