Home > Article > Web Front-end > Vertical centering--single-line text with a determined height of the parent element, multi-line text with a determined height of the parent element_html/css_WEB-ITnose
Vertical centering--single-line text with a determined height of the parent element, multi-line text with a determined height of the parent element_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:38:411216browse
Statement: From http://www.imooc.com/learn/9 Learn
Vertical centering of a single line of text with a height determined by the parent element
Yes This is achieved by setting the height and line-height of the parent element to be consistent.
.container{ height:100px; line-height:100px; background:#999;} Multiple lines of text with a certain height of the parent element
Use insert table (including tbody, tr, td) tags, and set 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} In chrome, firefox and IE8 or above browsers, you can set the display of block-level elements to table-cell and activate vertical- align attribute, but note that IE6 and 7 do not support this style.
<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>
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn