当前阅读教程:CSS入门到精通 > 文本对齐 text-align属性 | |||||||||||||||||||||
阅读(22555525) 收藏 赞(5685) 分享 | |||||||||||||||||||||
上一篇: 行高 line-height属性 | 下一篇: 文本修饰 text-decoration属性 | ||||||||||||||||||||
属性定义及使用说明text-align属性指定元素文本的水平对齐方式。
浏览器支持表格中的数字表示支持该属性的第一个浏览器版本号。 紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。 属性值
示例1:左中右对齐代码<!doctype html> <html> <head> <meta charset="utf-8"> <title>文本对齐 text-align属性</title> <!--定义内部样式--> <style> /*文本的对齐方式-居左-样式*/ .zuo{ text-align: left;/*文本的对齐方式,默认居左,可以不用设置*/ } /*文本的对齐方式-居中-样式*/ .zhong{ text-align: center;/*文本的对齐方式,设置:居中*/ } /*文本的对齐方式-居右-样式*/ .you{ text-align: right;/*文本的对齐方式,设置:居右*/ } </style> </head> <body>
<!--默认不加任何样式的文本对齐效果--> <div>黄菊华老师,不加任何样式,默认效果</div><br>
<!--添加了文本的对齐方式为:居左,和默认效果一样--> <div>黄菊华老师,文本的对齐方式,默认样式:居左</div><br>
<!--添加了文本的对齐方式为:居中--> <div>黄菊华老师,文本的对齐方式,设置:居中</div><br>
<!--添加了文本的对齐方式为:居右--> <div>黄菊华老师,文本的对齐方式,设置:居右</div><br>
</body> </html> 效果图示例2:两端对齐代码<!doctype html> <html> <head> <meta charset="utf-8"> <title>文本对齐 text-align属性</title> <!--定义内部样式--> <style> /*文本的对齐方式-两端对齐-样式*/ .duiqi{ text-align: justify;/*两端对齐*/ }
</style> </head> <body>
<!--默认不加任何样式的文本对齐效果--> <div> 零基础入门:所有课程都是从零基础讲起,即使你以前没学过,你也可以在黄老师的基础课程中从零开始学起。 手把手演练入门:所有的基础课程,先讲解基础的原理和知识点,然后一行代码一行代码敲入实战演练,解释每行代码的用途。 </div><hr>
<!--添加了文本的对齐方式为:两端对齐--> <div> 零基础入门:所有课程都是从零基础讲起,即使你以前没学过,你也可以在黄老师的基础课程中从零开始学起。 手把手演练入门:所有的基础课程,先讲解基础的原理和知识点,然后一行代码一行代码敲入实战演练,解释每行代码的用途。 </div>
</body> </html> 效果图 |
|||||||||||||||||||||
上一篇: 行高 line-height属性 | 下一篇: 文本修饰 text-decoration属性 |