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

互联网 18-11-15

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

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

语法格式：

text-align :(文本位置）

位置	说明
left	左对齐
right	右对齐
center	居中对齐
justify	两端对齐

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

文本左对齐的设置方法：

text-align：left;

文本右对齐设置方法：

text-align：right;

文本居中对齐设置方法：

text-align：center;

text-align：justify;

TextAlign.html

<!DOCTYPE html> <html> <head>     <meta charset="utf-8" />     <link rel="stylesheet" href="TextAlign.css" />     <title></title>     </head>     <body>   <div class="TextLeft">     php中文网左对齐<br />     php中文网<br />     php中文网<br />     php   </div>   <div class="TextRight">     php中文网右对齐<br />    php中文网<br />     php中文网<br />     php   </div>   <div class="TextCenter">     php中文网居中对齐<br />     php中文网<br />     php中文网<br />     php   </div>   <div class="TextJustify">     php中文网<br />     两端对齐<br />     php中文网<br />     php     </div>     </body>     </html>

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：

文本左对齐：

<!DOCTYPE html> <html> <head> 	<title></title> 	<meta charset="utf-8"> 	<style type="text/css"> .leftText{   text-align:left;    } 	</style> </head> <body> <div class="leftText">左对齐</div> </body> </html>

文本右对齐：

<!DOCTYPE html> <html> <head> 	<title></title> 	<meta charset="utf-8"> 	<style type="text/css"> .rightText{   text-align:right;    } 	</style> </head> <body> <div class="rightText">右对齐</div> </body> </html>

居中对齐：

<!DOCTYPE html> <html> <head> 	<title></title> 	<meta charset="utf-8"> 	<style type="text/css"> .centerText{   text-align:center;    } 	</style> </head> <body> <div class="centerText">居中对齐</div> </body> </html>

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

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

来源链接：

免责声明：
1.资讯内容不构成投资建议，投资者应独立决策并自行承担风险
2.本文版权归属原作所有，仅代表作者本人观点，不代表本站的观点或立场

标签：对齐