垂直居中-父元素高度确定的多行文本(方法一)

Posted Rinpe

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了垂直居中-父元素高度确定的多行文本(方法一)相关的知识,希望对你有一定的参考价值。

父元素高度确定的多行文本、图片等的竖直居中的方法有两种:

方法一:使用插入 table  (包括tbody、tr、td)标签,同时设置 vertical-align:middle。

css 中有一个用于竖直居中的属性 vertical-align,在父元素设置此样式时,会对inline-block类型的子元素都有用。下面看一下例子:

html代码:

<body>
<table><tbody><tr><td class="wrap">
<div>
    <p>看我是否可以居中。</p>
</div>
</td></tr></tbody></table>
</body>
css代码:
table td{height:500px;background:#ccc}

因为 td 标签默认情况下就默认设置了 vertical-align 为 middle,所以我们不需要显式地设置了。

以上是关于垂直居中-父元素高度确定的多行文本(方法一)的主要内容,如果未能解决你的问题,请参考以下文章

垂直居中-父元素高度确定的单行文本

关于垂直居中

111

垂直居中小记 line-height table vertical-align:middle

CSS居中总结

关于多行文本的垂直居中