标签：
先说水平对齐，那首先想到的就是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，数值多少就要看情况了。
标签：
原文地址：http://www.cnblogs.com/webbest/p/5618690.html
