Home > Developer > Web Develop
When it comes to this question, perhaps someone will ask that CSS does not have the Vertical-align property to set the vertical center? Even some browsers do not support I just need to do a little bit of CSS hack technology can AH! So here I have to say two more words, there is a Vertical-align property in CSS, but it only takes effect on elements that have valign attributes in the (X) HTML element, such as <td>, <th>, < in table elements Caption> and so on, and elements like <div> and <span> have no valign characteristics, so using vertical-align does not work for them.
CSS Page Layout div Horizontal Center Various methods
One, single line vertical center
If there is only one line of text in a container, it is relatively simple to center it, and we only need to set its actual height to line-height equal to the height of the row. Such as:
The code snippet provided by imoker.cn (Alice):
div {
height:25px;
line-height:25px;
Overflow:hidden;
}
The code is simple, and the Overflow:hidden is used later to prevent the content from going out of the container or creating a wrap, so that the vertical center effect is not reached.
The code snippet provided by imoker.cn (Alice):
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<title> Vertical Center for single-line text </title>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<style type= "Text/css" >
body {font-size:12px;font-family:tahoma;}
div {
height:25px;
line-height:25px;
border:1px solid #FF0099;
Background-color: #FFCCFF;
}
</style>
<body>
<div> now we want the text to be centered vertically! </div>
</body>
However, in Internet Explorer 6 and the following versions, this and the method do not support vertical centering of picture settings.
Two, the vertical center of multiple lines of unknown height text
If a piece of content, its height is variable, then we can use the previous section of the implementation of the horizontal center used to the last method, is to set the padding, the upper and lower padding values are the same. Similarly, this is a "look" of the vertical center, it is only to make the text <div> completely fill a way only. You can use code similar to the following:
The code snippet provided by imoker.cn (Alice):
div {
padding:25px;
}
The advantage of this approach is that it can be run on any browser, and the code is simple, but the premise of this approach is that the container's height must be scalable.
The code snippet provided by imoker.cn (Alice):
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<title> multiline text for vertical centering </title>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<style type= "Text/css" >
body {font-size:12px;font-family:tahoma;}
div {
padding:25px;
border:1px solid #FF0099;
Background-color: #FFCCFF;
width:760px;
}
</style>
<body>
<div><pre> now we want the text to be centered vertically!
div {
padding:25px;
border:1px solid #FF0099;
Background-color: #FFCCFF;
}
</pre></div>
</body>
Three, multi-line text fixed height of the center
At the beginning of this article, we have said that the Vertical-align property in CSS only works on the (X) HTML tag that has the valign attribute, but there is also a display property in the CSS that simulates <table> So we can use this property to let <div> simulation <table> can use Vertical-align. Note that the use of display:table and Display:table-cell must be set on the parent element, which must be set on the child element, so we need to add a <div> element for the text that needs to be positioned:
The code snippet provided by imoker.cn (Alice):
Div#wrap {
height:400px;
display:table;
}
div#content {
Vertical-align:middle;
Display:table-cell;
border:1px solid #FF0099;
Background-color: #FFCCFF;
width:760px;
}
The code snippet provided by imoker.cn (Alice):
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<title> multiline text for vertical centering </title>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<style type= "Text/css" >
body {font-size:12px;font-family:tahoma;}
Div#wrap {
height:400px;
display:table;
}
div#content {
Vertical-align:middle;
Display:table-cell;
border:1px solid #FF0099;
Background-color: #FFCCFF;
width:760px;
}
</style>
<body>
<div id= "Wrap" >
<div id= "Content" ><pre> now we want the text to be centered vertically!
Div#wrap {
height:400px;
display:table;
}
div#content {
Vertical-align:middle;
Display:table-cell;
border:1px solid #FF0099;
Background-color: #FFCCFF;
width:760px;
}
</pre></div>
</div>
</body>
This method should be ideal, but unfortunately Internet Explorer 6 does not correctly understand display:table and Display:table-cell, so this approach is in Internet Explorer Versions 6 and below are not valid. Well, it's so depressing! But there are other ways we can do that.
Iv. Solutions in Internet Explorer
In Internet Explorer 6 and the following versions, there is a flaw in the computational height. After the parent element is positioned in Internet Explorer 6, the base of the calculation appears to be inherited if the sub-element is calculated as a percentage (if the numeric value is an absolute value without the problem, but the basis for using a percentage calculation is no longer the height of the element. and the location height inherited from the parent element). For example, we have the following (X) HTML snippet:
The code snippet provided by imoker.cn (Alice):
<div id= "Wrap" >
<div id= "Subwrap" >
<div id= "Content" >
</div>
</div>
</div>
If we have an absolute positioning of the subwrap, then the content will inherit this property, although it will not appear in the page immediately, but if the content is relatively positioned, you will be using the 100%-point ratio is no longer the content of the original height. For example, we set the position for Subwrap to 40%, and we must set the top:-80% if we want to overlap the top edge of the content with wrap, so if we set subwrap top:50% we have to use 100%. Can get the content back to its original location, but what if we set the content to 50%? So it's just vertically centered. So we can use this method to achieve vertical centering in Internet Explorer 6:
The code snippet provided by imoker.cn (Alice):
Div#wrap {
border:1px solid #FF0099;
Background-color: #FFCCFF;
width:760px;
height:400px;
position:relative;
}
Div#subwrap {
Position:absolute;
border:1px solid #000;
top:50%;
}
div#content {
border:1px solid #000;
position:relative;
top:-50%;
}
Of course, this code can only work in browsers that have problems with computing such as Internet Exlporer 6. (But I do not understand, I read a lot of articles, do not know because the source of the same or what reason, it seems that many people do not want to explain the Internet Exlporer 6 The principle of this bug, I just know a little fur, but also to study)
The code snippet provided by imoker.cn (Alice):
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<title> multiline text for vertical centering </title>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<style type= "Text/css" >
body {font-size:12px;font-family:tahoma;}
Div#wrap {
border:1px solid #FF0099;
Background-color: #FFCCFF;
width:760px;
height:400px;
position:relative;
}
Div#subwrap {
Position:absolute;
top:50%;
}
div#content {
position:relative;
top:-50%;
}
</style>
<body>
<div id= "Wrap" >
<div id= "Subwrap" >
<div id= "Content" ><pre> now we want the text to be centered vertically!
Div#wrap {
border:1px solid #FF0099;
Background-color: #FFCCFF;
width:760px;
height:500px;
position:relative;
}
Div#subwrap {
Position:absolute;
border:1px solid #000;
top:50%;
}
div#content {
border:1px solid #000;
position:relative;
top:-50%;
}
</pre></div>
</div>
</div>
</body>
Five, perfect solution
Then we can combine the above two methods to get a perfect solution, but this need to use the knowledge of CSS hack. For the use of CSS hack to differentiate the browser, you can refer to this "simple CSS hack: distinguish between IE6, IE7, IE8, Firefox, Opera":
The code snippet provided by imoker.cn (Alice):
Div#wrap {
display:table;
border:1px solid #FF0099;
Background-color: #FFCCFF;
width:760px;
height:400px;
_position:relative;
Overflow:hidden;
}
Div#subwrap {
Vertical-align:middle;
Display:table-cell;
_position:absolute;
_top:50%;
}
div#content {
_position:relative;
_top:-50%;
}
At this point, a perfect centering scheme is produced.
The code snippet provided by imoker.cn (Alice):
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<title> multiline text for vertical centering </title>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<style type= "Text/css" >
body {font-size:12px;font-family:tahoma;}
Div#wrap {
display:table;
border:1px solid #FF0099;
Background-color: #FFCCFF;
width:760px;
height:400px;
_position:relative;
Overflow:hidden;
}
Div#subwrap {
Vertical-align:middle;
Display:table-cell;
_position:absolute;
_top:50%;
}
div#content {
_position:relative;
_top:-50%;
}
</style>
<body>
<div id= "Wrap" >
<div id= "Subwrap" >
<div id= "Content" ><pre> now we want the text to be centered vertically!
Div#wrap {
border:1px solid #FF0099;
Background-color: #FFCCFF;
width:760px;
height:500px;
position:relative;
}
Div#subwrap {
Position:absolute;
border:1px solid #000;
top:50%;
}
div#content {
border:1px solid #000;
position:relative;
top:-50%;
}
</pre></div>
</div>
</div>
</body>
P.S. The value of the vertical center vertical-align is middle, and the value of the horizontal center align is center, although the same is centered but the keyword is different.
Div+css Text Vertical Center to the right of the left side of the name, the name of the multi-line is still centered relative to the avatar
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
