时间:2021-07-01 10:21:17 帮助过:39人阅读
要设置文本对齐(左对齐,右对齐,居中对齐)需要用到的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
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8" />
- <link rel="stylesheet" href="TextAlign.css" />
- <title></title>
- </head>
- <body>
- <div class="TextLeft">
- Gxlcms左对齐<br />
- Gxlcms<br />
- Gxlcms<br />
- php
- </div>
- <div class="TextRight">
- Gxlcms右对齐<br />
- Gxlcms<br />
- Gxlcms<br />
- php
- </div>
- <div class="TextCenter">
- Gxlcms居中对齐<br />
- Gxlcms<br />
- Gxlcms<br />
- php
- </div>
- <div class="TextJustify">
- Gxlcms<br />
- 两端对齐<br />
- Gxlcms<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>
本篇文章到这里就全部结束了,更多关于文本对齐的内容大家可以关注Gxlcms的CSS视频教程栏目!!!
以上就是如何使用CSS实现文本左对齐、右对齐和居中对齐的详细内容,更多请关注Gxlcms其它相关文章!