如何使用CSS实现文本左对齐、右对齐和居中对齐

2023-05-28 09:03| 来源: 网络整理| 查看: 265

文本的位置在网页布局中是必不可少的，今天的这篇文章就来给大家分享关于使用CSS实现文本左对齐、右对齐和居中对齐的方法，下面我们来看具体的内容。

要设置文本对齐（左对齐，右对齐，居中对齐）需要用到的CSS属性是text-align属性。（相关推荐：CSS学习手册）

语法格式：

text-align :(文本位置）登录后复制位置说明left左对齐right右对齐center居中对齐justify两端对齐

接下我们来分别看看这四种对齐方式的设置方法

文本左对齐的设置方法：

text-align：left;登录后复制

文本右对齐设置方法：

text-align：right;登录后复制

文本居中对齐设置方法：

text-align：center;登录后复制

文本两端对齐设置方法：

text-align：justify;登录后复制

我们来看具体的代码示例1：

TextAlign.html

php中文网左对齐 php中文网 php中文网 php php中文网右对齐 php中文网 php中文网 php php中文网居中对齐 php中文网 php中文网 php php中文网两端对齐 php中文网 php 登录后复制

TextAlign.css

.TextLeft{ margin-top:24px; margin-left:32px; border:1px solid #ff6a00; width:480px; text-align:left; } .TextRight { margin-top: 24px; margin-left: 32px; border: 1px solid #ff6a00; width: 480px; text-align: right; } .TextCenter { margin-top: 24px; margin-left: 32px; border: 1px solid #ff6a00; width: 480px; text-align: center; } .TextJustify { margin-top: 24px; margin-left: 32px; border: 1px solid #ff6a00; width: 480px; text-align: justify; text-justify: distribute-all-lines; }登录后复制

显示结果

使用Web浏览器显示上述HTML文件。将显示如下所示的效果。

360截图20181115101423160.jpg

代码示例2：

文本左对齐：

.leftText{ text-align:left; } 左对齐登录后复制

文本右对齐：

.rightText{ text-align:right; } 右对齐登录后复制

居中对齐：

.centerText{ text-align:center; } 居中对齐登录后复制

本篇文章到这里就全部结束了，更多关于文本对齐的内容大家可以关注php中文网的CSS视频教程栏目！！！

以上就是如何使用CSS实现文本左对齐、右对齐和居中对齐的详细内容，更多请关注php中文网其它相关文章！

【本文地址】

公司简介

联系我们