css基础文本对齐，水平对齐，垂直对齐

Posted 2020-07-30 淡烘糕

先说水平对齐，那首先想到的就是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，数值多少就要看情况了。