本文摘自PHP中文网,作者醉折花枝作酒筹,侵删。
css中可用text-align属性来设置文本的水平对齐方式,语法为“text-align:left|right|center|justify”;值left设置左对齐,right设置右对齐,center设置居中,justify设置两端对齐。
本文操作环境:Windows7系统、HTML5&&CSS3版,DELL G3电脑
在一个块级容器中,当一行中的行内级框的总宽度,小于容器的宽度时,通过 text-align属性来指定这些行内级框在行中的水平分布。
事实上,text-align属性是通过指定行框与哪个点对齐,来决定行内级框在行中如何进行水平分布。他只能应用于块级元素,它的最典型应用,就是指定段落中每一行内容的水平对齐方式。
段落是一个块级容器,容器中的每一行内容都会生成一个行框,就可以把段落看做是这些行框的堆叠。由于并非每一行的内容都能填满容器的宽度,因此,就可以通过 text-align属性,来指定每一行中内容的水平对齐方式。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | <!DOCTYPE html>
< html >
< head >
< meta charset = "UTF-8" >
< title ></ title >
< style type = "text/css" >
.a1{
/*vertical-align: top; background: lightcoral;opacity: 0.7;*/
/*vertical-align: text-top;background: lightgray;*/
/*vertical-align: middle;font-size: 30px;*/
/*vertical-align: bottom;background: lightgray;*/
vertical-align: text-bottom;
}
</ style >
</ head >
< body >
< p style = "direction: ltr;" >我是p标签我是p标签我是p标签</ p >
< p style = "direction: rtl;" >我是p标签我是p标签我是p标签</ p >
< p style = "text-align: right;" >我是p标签我是p标签我是p标签</ p >
< p style = "text-align: left;" >我是p标签我是p标签</ p >
< p style = "text-align: center;" >我是p标签我是p标签我是p标签</ p >
< p style = "line-height: 30px;background: lightblue;" >我是p标签我是p标签</ p >
< p style = "vertical-align:baseline;" >我是p标签我是p标签我是p标签</ p >
< p >A< span style = "vertical-align: sub;" >4</ span ></ p >
< p >Q< span style = "vertical-align: super;" >2</ span ></ p >
< div style = "background: lightblue;height: 30px;" >
我是div
< span class = "a1" >
我是s
</ span >
</ div >
</ body >
</ html >
|
推荐学习:《css视频教程》
以上就是css文本怎么设置水平对齐的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
css怎么写五角星
ie11下不能引入外部css的解决办法
css border-top-style属性怎么用
css modules 详解
jquery如何动态添加删除css样式?(代码示例)
css如何让图片旋转
css怎么把按钮上移
css水平居中怎么设置
css punctuation-trim属性怎么用
css transform属性怎么用
更多相关阅读请进入《css》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » css文本怎么设置水平对齐