Summary of vertical orientation of div height content in CSS

Last Update:2017-01-13 Source: Internet

Author: User

Tags relative wrapper

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Let the contents of the div be centered vertically, but there are several ways to do so, and so I enumerate:

Line height (line-height) method

If you want to center vertically with only one line or several words, it is the easiest to make, as long as the line height of the text and the height of the container can be the same, such as:

The code is as follows	Copy Code
p {height:30px; line-height:30px; width:100px; overflow:hidden;}

This code can achieve the effect of centering text vertically in a paragraph.
Two, the internal margin (padding) method
Another method is very similar to the row height method, which is also suitable for vertically centering a line or lines of text, by using padding to center the content vertically, for example:

The code is as follows	Copy Code
p {padding:30px;}

This code has the same effect as the Line-height method.

Third, the simulation table method

In fact, the simulation table method is to use the declaration of elements in CSS to let block elements like tables, the use of CSS attributes display, vertical-align and so on. First look at the following HTML code:

The code is as follows	Copy Code
<div id= "box" > <div id= "Content" > Center display </div> </div>

Referring to the above HTML code, let the most outer div named box appear in table style, and then let the div named content in box appear in the cell, and use Vertical-align:middle to center it vertically, so that it can simulate the way the table is displayed, The CSS code is as follows:

The code is as follows	Copy Code
#wrap {height:400px; display:table;} #content {vertical-align:middle; display:table-cell; border:1px solid #FF0099; Background: #000; width:400px; }

But this method has a disadvantage, because IE browser to a high degree of understanding will produce errors, so this method is only valid for Firefox, IE is not valid, in this case, we need to find out on ie correction method, so there is another way.
Iv. Positioning method

As the name suggests, the localization method uses the CSS localization attribute position to the element localization method, also belongs to the simulation method, but its support to IE is still good. Its HTML code is:

The code is as follows	Copy Code
<div id= "box" > <div id= "sub" > <div id= "Content" > Vertical center </div> </div> </div>

This code is more than one of the previous method named Sub Div, its role is used to locate, the principle is: first let box out of relative positioning, sub relative box for relative positioning, in the box in the vertical direction of 50%, Then let the contents of the real content in sub vertical 50%, so that the content in box vertically centered effect, their CSS code is as follows:

The code is as follows	Copy Code
#wrap {border:1px solid #000; background: #F00; width:400px; height:400px; position:relative;} #subwrap {Position:absol Ute top:50%; } #content {border:1px solid #000; position:relative; top:-50%; color: #FFF;}

This code, whether in IE or Firefox, can be centered properly

Instance

Programme I:

The main principle is the standard browser with table and Table-cell layout, and then use the Vertical-align:middle center element, but IE67 does not support table layout, so use a CSS hake, is with a # start attributes

The code is as follows

Copy Code

<! DOCTYPE html>

<html>

<head>

<meta charset= "Utf-8"/>

<title>Demo</title>

<style type= "Text/css" >

#outer {

width:500px;

height:200px;

margin:50px Auto;

border:1px solid #CCC;

display:table;

Text-align:center;

#position: relative;

}

#middle {

Display:table-cell;

Vertical-align:middle;

#position: absolute;

#top: 50%;

#left: 50%;

}

#inner {

#position: relative;

#top:-50%;

#left:-50%;

}

</style>

</head>

<body>

<div id= "outer" >

<div id= "Middle" >

<img id= "inner" src= "Logo_small.gif"/>

</div>

</div>

</body>

</html>

Programme II:

Implemented with a negative margin, but the disadvantage is to know the width and height of the centered content.

The code is as follows

Copy Code

<! DOCTYPE html>

<html>

<head>

<meta charset= "Utf-8"/>

<title>Demo</title>

<style type= "Text/css" >

#outer {

width:500px;

height:200px;

margin:50px Auto;

border:1px solid #CCC;

position:relative;

}

#inner {

position:relative;

left:50%;

top:50%;

margin-left:-71px;

margin-top:-27px;

}

</style>

</head>

<body>

<div id= "outer" >

<img id= "inner" src= "Logo_small.gif"/>

</div>

</body>

</html>

Finally attached to their own written, all the center layout of the example page, we do not understand can refer to

The code is as follows

Copy Code

<?xml version= "1.0" encoding= "Utf-8"?>

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >

<html xmlns= "http://www.w3.org/1999/xhtml" xml:lang= "en" >

<head>

<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>

<title>demo:: Vertical align:middle</title>

<meta lang= "en" name= "author" content= "Spenser Lee"/>

<meta lang= "en" name= "copyright" content= "(c) 2006 Liberty Studio"/>

<style media= "screen" type= "Text/css" >

html,body,div,h1,h2,pre,dd,ol{margin:0;padding:0;border:0}

HTML{MIN-WIDTH:779PX}

Body{background: #fff; color: #596480; Text-align:center}

div#main-wrapper{padding:12px 5px;width:769px;margin:0 Auto}

Div,code,p,h1,h2,address,dt,dd,li{font:normal 12px/1.5em Tahoma, "Lucida Grande", Helvetica,verdana,lucida,arial, " Arial Unicode ", Sans-serif,serif}

h1{font-size:22px;font-weight:bold;border-left:12px solid #324f96; background: #e0eaf4; color: #4868a9; height:4em; Line-height:4em;padding:0 12px;overflow:hidden; Text-align:left}

H2{font-size:12px;font-weight:bold;background: #c0014e; color: #fff; height:2.5em;line-height:2.5em;padding:0 24px ; overflow:hidden;margin:12px 0;text-align:left}

H2 A{color: #fff; background:transparent}

H2 A:hover{text-decoration:none}

p{margin:6px 0;padding:0 12px 0 24px;text-indent:2em;text-align:left}

P.snap-back{text-align:right}

code{display:block;font-family: "Courier New", Courier, monospace, Mono, serif;margin:12px auto;padding:12px;border:1 PX solid #596480; Color:inherit;background: #f6f6f6; text-align:left;white-space:pre;width:350px}

Strong{font-weight:bold}

Em{font-style:italic}

address{display:block;padding:0 12px;margin:12px 0;text-align:right}

dl{margin:6px 0;padding:0 12px 0 24px;text-align:left}

Dt{margin:0;text-indent:2em;font-weight:bold}

DD{MARGIN-LEFT:24PX;TEXT-INDENT:2EM}

Li{list-style:square inside None;text-align:left}

OL#TABLE-OF-CONTENT{PADDING-LEFT:24PX}

A{color: #c0014e; Background:transparent;text-decoration:none}

A:hover{text-decoration:underline}

div.demo{width:400px;margin:12px auto;border:1px solid #596480; Color:inherit;background: #ffc}

Div.demo p{text-align:left;margin:24px;text-indent:0}

p#demo-1{margin:12px auto;padding:0 12px;width:400px;text-indent:0;border:1px solid #596480 Color:inherit; Background: #ffc; Line-height:4em;height:4em;overflow:hidden}

div#demo-2{padding:50px 0}

Div#demo-4, div#demo-5{height:300px;position:relative}

Div#demo-4 Div, div#demo-5 div{position:absolute;top:50%;left:0}

Div#demo-4 p, div#demo-5 p{position:relative;top:-50%}

Div#demo-3{display:table;height:300px;border-collapse:collapse}

Div#main-wrapper>div#demo-5{position:static;display:table}

Div#main-wrapper>div#demo-5>div{display:table-cell;vertical-align:middle;position:static}

Div#demo-3>div{display:table-row}

Div#demo-3>div>div{display:table-cell;vertical-align:middle}

span.property{font-family: "Courier New", Courier, monospace, Mono, serif;border-bottom:1px #596480; dotted: #ffc; color: #c0014e}

p.copyright{line-height:3em;text-align:center;border-top:1px dotted #596480}

</style>

</head>

<body>

<div id= "Main-wrapper" >

<h1>demo of middled Vertical align</h1>

<address>

Author:spenser Lee, Liberty studio<br/>

Originally posted on <a href= "/bbs/" title= "Blueidea Forum" >blueidea forum</a>

</address>

<h2><a id= "bullet-0" >table of centents:</a></h2>

<ol id= "Table-of-content" >

<li><a href= "#bullet-1" title= "single line Countainer with/without a fixed height" >single line Countainer Wit H/without a fixed height</a></li>

<li><a href= "#bullet 2" title= "Align multi-line container which does not have a fixed height" >align multi-line Container which does not have a fixed height</a></li>

<li><a href= "#bullet-3" title= "simulating table layout in container with a fixed height" >simulating table Layo UT in container with a fixed height</a></li>

<li><a href= "#bullet-4" title= "IE ' s Solution" >ie ' s solution</a></li>

<li><a href= "#bullet-5" title= "a perfect compounded sample" >a perfect compounded sample</a></li >

</ol>

<h2><a id= "bullet-1" >case One:single line Countainer with/without a fixed height</a></h2>

<p>if you are want to display a container which only holds a single line of text, can set <span class= "Prope Rty ' >line-height</span> property to <span class= ' property ' >height</span> property, then set < Span class= ' property ' >overflow</span> to Hidden.</p>

<p><strong>Sample:</strong></p>

<p id= "demo-1" >lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>

<p><strong>core code:</strong></p>

<pre><code>.middle-demo-1{

Height:4em;

Line-height:4em;

Overflow:hidden;

}</code></pre>

<dl>

<dt>Notes:</dt>

<dd>

<ol>

<li>i strongly recommend you with relative size in <span class= ' property ' >height</span> and <span clas S= ' property ' >line-height</span> property. <em>Why?</em> you can simply set the font size larger if your browser support it. When it gets large enough, you'll be the Countainer is stretched and the <span class= T is no longer equal to <span class= ' property ' >line-height</span> property, thus, the layout are messed up. Using relative size as <span class= ' property ' >em, ex</span> or <span class= ' property ' >%</span> Would let your countainer stretch with the content.</li>

<li><span class= ' property ' >overflow:hidden</span> is a must. <em>Why?</em> Same as above. Just ensure <span class= ' property ' >height</span> and <span ' property ' class= > are always equal.</li>

</ol>

</dd>

</dl>

<dl>

<dt>Pros:</dt>

<dd>

<ol>

<li>fits in both <span class= ' property ' >block</span> elements and <span ' property ' > Inline</span> elements.</li>

<li>capable of all 5th-gen browsers.</li>

</ol>

</dd>

</dl>

<dl>

<dt>Cons:</dt>

<dd>

<ol>

<li>text length is limited. Max with only <em>one</em> line.</li>

<li>does not work down none text contents such as images and objects.</li>

</ol>

</dd>

</dl>

<p class= "Snap-back" ><a href= "#bullet-0" title= "back top table of centents" >Back</a></p>

<h2><a id= "Bullet-2" >case two:align multi-line container which does not have a fixed height</a></h2& Gt

<p>in this case, we should simply set a pair of the fixed equivalences to padding-top and Padding-bottom attribute. It works on both IE and Non-ie browsers.</p>

<p><strong>Sample:</strong></p>

<div class= "Demo" id= "Demo-2" >

<p>lorem ipsum dolor sit amet, consectetuer adipiscing. Maecenas dignissim diam eu sem proin nunc ante accumsan, sollicitudin at, sodales sed, semper. Etiam Orci. Vestibulum magna Lectus, venenatis nec, Tempus ac, dictum vel, lorem.</p>

</div>

<p><strong>core code:</strong></p>

<pre><code>.middle-demo-2{

padding-top:24px;

padding-bottom:24px;

}</code></pre>

<dl>

<dt>Pros:</dt>

<dd>

<ol>

<li>fits in both <span class= ' property ' >block</span> elements and <span ' property ' > Inline</span> elements.</li>

<li>works on none text contents as fine as text contents.</li>

<li>capable of all 5th-gen browsers. Might need a little tune-up for the box model bug of IE5 though.</li>

</ol>

</dd>

</dl>

<dl>

<dt>Cons:</dt>

<dd>

<ol>

<li>you can <em>not</em> assign height in this solution.</li>

</ol>

</dd>

</dl>

<p class= "Snap-back" ><a href= "#bullet-0" title= "back top table of centents" >Back</a></p>

<h2><a id= "bullet-3" >case three:simulating table layout in container with a fixed HEIGHT&LT;/A&GT;&LT;/H2 >

&LT;P&GT;CSS offers a set of very convenient display atrribute values called <span class= "property" >display:table&l T;/span&gt, <span class= "property" >display:table-row</span&gt, <span class= the "property" >display: Table-cell</span> and other display values begin with <span class= the "property" &GT;TABLE-&LT;/SPAN&GT;. It offers a way to simulate table layout the all elements. As a result, the any element with <span class= "property" >display:table-cell</span&gt, <span class= "property" & Gt;vertical-align:middle</span> and a fixed height would display exactly like a table cell.</p>

<p><strong>Sample:</strong> (not being able to view the effect on IE) </p>

<div class= "Demo" id= "Demo-3" >

<div><div><p>lorem ipsum dolor sit amet, consectetuer adipiscing. Maecenas dignissim diam eu sem proin nunc ante accumsan, sollicitudin at, sodales sed, semper. Etiam Orci. Vestibulum magna Lectus, venenatis nec, Tempus ac, dictum vel, lorem.</p></div></div>

</div>

<p><strong>core code:</strong></p>

<pre><code>.middle-demo-3{

Display:table-cell;

height:300px;

Vertical-align:middle;

}</code></pre>

<dl>

<dt>Notes:</dt>

<dd>

<ol>

<li><span class= ' property ' >display:table-cell</span> must work with other elements with <span Class= ' property ' >display:table</span> value sets in order to form a literal table. Or it might cause unexceptable bugs.</li>

<li>sadly IE series (including the latest IE 7 Beta) does not support any of <span class= ' property ' >display:t Able</span> values, so it won ' t work in ie.</li>

</ol>

</dd>

</dl>

<dl>

<dt>Pros:</dt>

<dd>

<ol>

<li>it has the most perfect render for <span class= ' property ' >vertical-align:middle</span> align.< /li>

</ol>

</dd>

</dl>

<dl>

<dt>Cons:</dt>

<dd>

<ol>

<li>it latest versions of Non-ie browsers, such as Mozilla, Firefox, Netscape 8, Opera 8, and safari.& Lt;/li>

</ol>

</dd>

</dl>

<p class= "Snap-back" ><a href= "#bullet-0" title= "back top table of centents" >Back</a></p>

<h2><a id= "bullet-4" >case Four:ie ' s solution</a></h2>

<p>since IE is a lame browser when it comes to anything, so can ' t use the solution above simply because IE does Not recognize it in all. However, <strong>there has been nothing yet you can don't code with CSS if you have already coded it with table</st Rong>. It even offers you possibility to layout your page, tables can not do!</p>

<p>so What ' s the solution for IE? Like what we always do:hit IE "s back with the BUGS it offers!</p>

<p><strong>Sample:</strong> (for your are able to view the correct result is only on IE) </p>

<div class= "Demo" id= "Demo-4" >

<div><p>lorem ipsum dolor sit amet, consectetuer adipiscing. Maecenas dignissim diam eu sem proin nunc ante accumsan, sollicitudin at, sodales sed, semper. Etiam Orci. Vestibulum magna Lectus, venenatis nec, Tempus ac, dictum vel, lorem.</p></div>

</div>

<pre><code>.middle-demo-4{

height:300px;

position:relative;

}

. middle-demo-4 div{

Position:absolute;

top:50%;

left:0;

}

. middle-demo-4 Div div{

position:relative;

Top:-50%;

left:0;

}</code></pre>

<p>see? Don T ask me why it worked. This is based on years of study in IE ' s own stupid layout model and it works very the the box even the IE5 th hack. I won ' t tell you the theory behind. It's my top secret, with which I solved a lot of other cross browser layout problems, and I ' m not going to share it with Y Ou. But you are free to use this IE hack It's kinda handful in most occassions.</p>

<dl>

<dt>Pros:</dt>

<dd>

<ol>

<li>the only perfect vertical align to IE. It works even better then add automatic <span class= ' property ' >padding</span>s.</li>

</ol>

</dd>

</dl>

<dl>

<dt>Cons:</dt>

<dd>

<ol>

<li>after all it ' s a CSS hack. We can avoid it if not as ie.</li>

</ol>

</dd>

</dl>

<p class= "Snap-back" ><a href= "#bullet-0" title= "back top table of centents" >Back</a></p>

<h2><a id= "bullet-5" >case five:a Perfect compounded sample</a></h2>

<p>here ' s perfect compounded solution on vertical centering this works on almost all latest

<p><strong>Sample:</strong> (this works on almost all browsers) </p>

<div class= "Demo" id= "Demo-5" >

<div><p>lorem ipsum dolor sit amet, consectetuer adipiscing. Maecenas dignissim diam eu sem proin nunc ante accumsan, sollicitudin at, sodales sed, semper. Etiam Orci. Vestibulum magna Lectus, venenatis nec, Tempus ac, dictum vel, lorem.</p></div>

</div>

<p>i ' m not going to give your full code of this one. But it ' s not difficult to write it yourself, with the solution of case 3 and 4, and a little knowledge in Ie/non-ie CSS ha Ckers. And actually the hacking style isn't limited, so I don ' t want to force your to with my hacking style neither. Stop being lazy, and write the code yourself!</p>

<dl>

<dt>browser capability:</dt>

<dd>

<ol>

<li>works on:ie6+, Mozilla 1.5+, Netscape Navigator 7+, Opera 7+, Firefox 1.0+ and Safari 1.0+</li>

<li>on IE5, you might need to apply the box model hacker to make the height correct.</li>

<li>untested:webomini, konqueror.</li>

<li>fails On:other browsers not reffered in the list above.</li>

</ol>

</dd>

</dl>

<p class= "Snap-back" ><a href= "#bullet-0" title= "back top table of centents" >Back</a></p>

<p class= "Copyright" >copyright &copy; Spenser Lee, 2006 Liberty studio</p>

</div>

</body>

</html>

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More