先说水平对齐,那首先想到的就是text-align了,text-align:left,text-align:center,text- align:right,代表的就是左对齐,居中对齐和右对齐,需要注意的是如果有padding这类的东西在,千万看清楚两边的padding值是否相 同,当你看到文字不在中间的时候,可能就是因为两边的padding值不同,举例说明:
<p>我是一段测试文字</p>
如果看过我前面一片做一个简单网页的日志就知道,这个应该放在body标签里面。
放在网页里就是这样:
为了能看清楚,我把body设置成960px宽,而且添加了灰色边框。
加一个text-align:center;就变成了这样:
确实到了中央,但如果padding-left:10px;padding-right:50px;结果就成了这样:
我试了下,不太明显,因为总的宽度960太大了,换成padding-left:10px;padding-right:300px;,结果就是这样:
这下就明显了,text-align:cneter;也不齐了,所以当对不齐的时候,看看有没有这样的情况存在。
说到padding,也可以用padding来对齐,极不推荐,所以不多说了。
再来说说垂直对齐,这个比较麻烦,如果是一行文字,可以用line-height来控制,也就是用行距来控制,line-height的值和文字所在容器的高度一样,比如,上面那个例子,p的高度是30px,就像这样:
为了看清楚,p用淡灰色背景标示,要把文字放在中间可以加上line-height:30px;,结果就成了这样:
看吧,垂直方向到中间了,配合上text-align:center;,就到了正中间了。
垂 直方向对齐有一个属性vertical-align,vertical-align:top;,vertical- align:middle;,vertical-align:bottom;,分别对应上对齐,中对齐,下对齐。为什么我一开始不说呢,有时候会无效,所 以我不常用,本来垂直对齐就不常用。
最后就是用padding了,一般是padding-top,数值多少就要看情况了。