Heim  >  Artikel  >  Web-Frontend  >  垂直居中--父元素高度确定的单行文本、父元素高度确定的多行文本_html/css_WEB-ITnose

垂直居中--父元素高度确定的单行文本、父元素高度确定的多行文本_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:38:411214Durchsuche

声明:来自http://www.imooc.com/learn/9 学习

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

是通过设置父元素的 height 和 line-height 高度一致来实现的。

.container{    height:100px;    line-height:100px;    background:#999;}

父元素高度确定的多行文本

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

<body><table><tbody><tr><td class="wrap"><div>    <p>看我是否可以居中。</p>    <p>看我是否可以居中。</p>    <p>看我是否可以居中。</p>    <p>看我是否可以居中。</p>    <p>看我是否可以居中。</p></div></td></tr></tbody></table></body>

table td{height:500px;background:#ccc}

在 chrome、firefox 及 IE8 以上的浏览器下可以设置块级元素的 display 为 table-cell,激活 vertical-align 属性,但注意 IE6、7 并不支持这个样式。

<div class="container">    <div>        <p>看我是否可以居中。</p>        <p>看我是否可以居中。</p>        <p>看我是否可以居中。</p>        <p>看我是否可以居中。</p>        <p>看我是否可以居中。</p>    </div></div><style>.container{    height:300px;    background:#ccc;    display:table-cell;/*IE8以上及Chrome、Firefox*/    vertical-align:middle;/*IE8以上及Chrome、Firefox*/}</style>

 

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn