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 –
步骤 2 – 为容器元素内的两列创建两个子元素 –
第三步− 容器和列元素应添加CSS样式 −
.container { display: flex; justify-content: space-between;}.left-col { width: 49%; text-align: left;}.right-col { width: 49%; text-align: right;}
第 4 步 – 用内容填充列元素 –
Left column content
Right column content
第 5 步 – 您可以通过在计算机浏览器中预览结果来观察排列在两列直列中的文本。
第 6 步 – 最终代码如下所示 –
Document .container { display: flex; justify-content: space-between; } .left-col { width: 49%; text-align: left; } .right-col { width: 49%; text-align: right; }Left column content
Right column content
方法二：使用“display属性”
要建立一个灵活的布局，请将display属性设置为flex或grid。使用justify-content和align-items属性，您可以管理不同布局模式下元素的位置。
示例
在下面的例子中，我们将学习如何使用display属性在css中对齐文本
第 1 步 – 在 HTML 中创建一个容器元素，如 div –
步骤 2 – 为容器元素内的两列创建两个子元素 –
第三步− 容器和列元素应添加CSS样式 −
.container { display: flex; justify-content: space-between;}.left-col { width: 49%;}.right-col { width: 49%;}
第 4 步 – 用内容填充列元素 –
Left column content
Right column content
第 5 步 – 您可以通过在计算机浏览器中预览结果来观察排列在两列直列中的文本。
第 6 步 – 最终代码如下所示 –
Document .container { display: flex; justify-content: space-between; } .left-col { width: 49%; } .right-col { width: 49%; text-align: right; }Left column content
Right column content
方法 3：使用“float 属性”
使用 float 属性，元素可以浮动到其父容器的左侧或右侧。可以使用它来创建在多列中对齐的文本，以创建多列布局。
示例
在下面的例子中，我们将学习如何使用Float属性在CSS中对齐文本
第 1 步 – 在 HTML 中创建一个容器元素，如 div –
步骤 2 – 为容器元素内的两列创建两个子元素 –
第三步− 容器和列元素应添加CSS样式 −
.left-col { width: 49%; float: left; text-align: left;}.right-col { width: 49%; float: right; text-align: right;}
第 4 步 – 用内容填充列元素 –
Left column content
Right column content
第 5 步 – 您可以通过在计算机浏览器中预览结果来观察排列在两列直列中的文本。
第 6 步 – 最终代码如下所示 –
Document .left-col { width: 49%; float: left; text-align: left; } .right-col { width: 49%; float: right; text-align: right; }Left column content
Right column content
结论
无论是CSS中的text-align属性还是display属性都可以将文本对齐到两个直立的列中。display属性指示元素的布局，例如它应该显示为块级元素还是内联元素。
以上就是如何在CSS中对齐文本，使两列都保持直线？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1551977.html
微信扫一扫 
支付宝扫一扫 
