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

WBOY
Release: 2016-06-24 11:38:41
Original
1214 people have browsed it

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;}
Copy after login

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>
Copy after login

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

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>
Copy after login

source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template