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 CSS
Hack technology can be AH! So here I have to say two more words, CSS does have a vertical-align property, but it only for the (X) HTML element has the valign attribute of the element is born
such as <td>, <th>, <caption>, etc. in table elements, and elements like <div>, <span>, are not valign features, So using vertical-align is not up to them.
Role.
Related tutorials: n methods for div horizontal centering
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:
div {
height:25px;
line-height:25px;
Overflow:hidden;
}
This code is simple, and the settings behind using Overflow:hidden are designed to prevent the content from exceeding the container or creating a wrap, so that the vertical center effect is not reached. More CSS teaches
Ride.
<! 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>
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, so that the upper and lower
The padding value is the same. Similarly, this is a "look" of the vertical center, it is only to make the text <div> completely filled with a adapting just. Can be used similar to the following
The code for the polygon:
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.
<! 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 in the CSS
Properties are capable of simulating <table>, so we can use this property to allow <div> simulation <table> to use Vertical-align. Note that the display:table and
Display:table-cell, the former must be set on the parent element, the latter must be set on the child element, so we need to locate the text to add another <div> element:
Div#wrap {
height:400px;
display:table;
}
div#content {
Vertical-align:middle;
Display:table-cell;
border:1px solid #FF0099;
Background-color: #FFCCFF;
width:760px;
}
<! 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! Webjx.com
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 approach should be ideal, but unfortunately internet Explorer 6 does not correctly understand display:table and Display:table-cell, so this approach
Internet Explorer 6 and the following versions are not valid. Well, it's so depressing! But we have other options.
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, if the child element
When you do a percent calculation, the basis of the calculation appears to be inherited (if the positional value is an absolute value without this problem, but the basis for using a percentage calculation will no longer be the element's
Height, and the positioning height inherited from the parent element). For example, we have the following (X) HTML snippet:
<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 in the
When the line is relative to the location, the 100%-point ratio you use will no longer be the content's original height. For example, we set Subwrap's position to 40%, and if we want to make the content
If the edges and wrap coincide, you must set the top:-80%, so if we set Subwrap's top:50%, we must use 100% to get the content back to its original position.
, 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:
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 don't understand, I read a lot of articles, do not know is because out
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 again)
<! 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. If you use CSS hack to differentiate your browser, you can
To refer to this "simple CSS hack: differentiate IE6, IE7, IE8, Firefox, Opera":
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.
<! 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>
CSS Tutorial: div vertically centered n methods and multiline text vertically centered method
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
