对文本垂直居中的一些方法记录
我们在写网页时不可避免的需要对文本进行排版,很多时候需要对文本进行居中处理,水平居中很好解决,几乎一条align:center就能解决多数情况,而垂直方向是我们此文的重点内容。
我们将从单行到多行,从外围块高度确定到不确定来分析,当然暂时不考虑图文混排的情况。
首先,单行固定高度:
我们只需要设置它的实际高度height和所在行的高度line-height相等即可。
例如:
Document
我是一段单行文本
当然为了保险起见,比如说文本太长,一个块宽度不够时,防止文本换行,我们可以使用overflow:hidden使其多出来的文本被隐藏,只是这也是一个缺点。
多行固定高度:
由于高度已定,我们还可以按照上面的方法,使各行的line-height值为块高除以行数:
Document
我是第一段单行文本
我是第二段单行文本
我是第三段单行文本
我是第四段单行文本
CSS中的vertical-align属性只会对拥有valign特性的(X)HTML标签起作用,但是在CSS中还有一个display属性能够模拟<table>,所以我们可以使用这个属性来让<div>模拟<table>就可以使用vertical-align了。
注意,display:table和display:table-cell的使用方法,前者必须设置在父元素上,后者必须设置在子元素上,因此我们要为需要定位的文本再增加一个<div>元素:
Document
我是第一段单行文本
我是第二段单行文本
我是第三段单行文本
我是第四段单行文本
效果如下:
可以发现文本是整体的(相当于多行的文本作为一个整体了)垂直的居中,感觉没有上面的方法使得文本之间距离也相等的功能。自己看需要来使用吧。
多行未知高度文本的垂直居中:
实际上是高度为自动的情况(因为高度未知也可能是设置了高度但自己不知道),这时我们可以使用上下的 padding值相同来实现:
Document
我是第一段单行文本
我是第二段单行文本
我是第三段单行文本
我是第四段单行文本
效果如下:
个人感觉这种效果与使用table-cell差不多。