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

文本的位置在网页布局中是必不可少的，今天的这篇文章就来给大家分享关于使用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文件。将显示如下所示的效果。

代码示例2：

文本左对齐：

.leftText{

text-align:left;

}

左对齐

文本右对齐：

.rightText{

text-align:right;

}

右对齐

居中对齐：

.centerText{

text-align:center;

}

居中对齐

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