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

WBOY
Freigeben: 2016-06-24 11:38:41
Original
1214 Leute haben es durchsucht

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

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

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

.container{    height:100px;    line-height:100px;    background:#999;}
Nach dem Login kopieren

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

使用插入 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>
Nach dem Login kopieren

table td{height:500px;background:#ccc}
Nach dem Login kopieren

在 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>
Nach dem Login kopieren

 

Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage