When it comes to this question, some people may ask, isn't there a vertical align attribute in CSS to set the vertical center? Even if some browsers don't support it, I just need to do a little CSS
Hack technology is OK! So I'd like to say a few words here. CSS does have vertical align attribute, but it only applies to the elements with valign attribute in (X)HTML elements
For example, < td >, < th >, < caption > in table elements, while elements such as < div >, < span > have no valign feature, so using vertical align has no effect on them
effect.
Related tutorials: N methods of div horizontal centering
I. single line vertical center
If there is only one line of text in a container, it is relatively simple to center it. We only need to set its actual height equal to the line height of the line.
For example:
div {
height:25px;
line-height:25px;
overflow:hidden;
}
This code is very simple. The setting of overflow:hidden is used later to prevent the content from exceeding the container or generating automatic line feed, so the effect of vertical centering cannot be achieved. More CSS Teaching
Cheng.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> Single line text is vertically centered </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>
</head>
<body>
<div>Now we want to center this text vertically!</div>
</body>
</html>2, Vertical center of multiple lines of text with unknown height
If the height of a paragraph is variable, we can use the last method to achieve horizontal centering mentioned in the previous section, that is, setting Padding to make the top and bottom
The padding value is the same. Similarly, this is also a "look" vertical centering method, which is just a way to make the text completely fill < div >. You can use the following
Face code:
div {
padding:25px;
} The advantage of this method is that it can run on any browser, and the code is very simple, but the premise of this method is that the height of the container must be scalable.
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <title> Multiline text vertically centered </title>
5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6 <style type="text/css">
7 body { font-size:12px;font-family:tahoma;}
8 div {
9 padding:25px;
10 border:1px solid #FF0099;
11 background-color:#FFCCFF;
12 width:760px;
13 }
14 </style>
15 </head>
16 <body>
17 <div><pre>Now we want to center this text vertically!
18 div {
19 padding:25px;
20 border:1px solid #FF0099;
21 background-color:#FFCCFF;
22 }
23 </pre></div>
24
25
26 </body>
27 </html>3, Fixed height centering of multiline text
At the beginning of this article, we have said that the vertical align attribute in CSS will only work on (X)HTML tags with valign feature, but there is also a display in CSS
Attribute can simulate < Table >, so we can use this attribute to make < div > simulate < Table >, so we can use vertical align. Note that display:table and
Display: the use method of table cell. The former must be set on the parent element and the latter must be set on the child element. Therefore, we need to add another < div > element for the text to be located:
div#wrap {
height:400px;
display:table;
}
div#content {
vertical-align:middle;
display:table-cell;
border:1px solid #FF0099;
background-color:#FFCCFF;
width:760px;
} 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <title> Multiline text vertically centered </title>
5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6 <style type="text/css">
7 body { font-size:12px;font-family:tahoma;}
8 div#wrap {
9 height:400px;
10 display:table;
11 }
12 div#content {
13 vertical-align:middle;
14 display:table-cell;
15 border:1px solid #FF0099;
16 background-color:#FFCCFF;
17 width:760px;
18 }
19 </style>
20 </head>
21 <body>
22 <div id="wrap">
23 <div id="content"><pre>Now we want to center this text vertically! Webjx.Com
24 div#wrap {
25 height:400px;
26 display:table;
27 }
28 div#content {
29 vertical-align:middle;
30 display:table-cell;
31 border:1px solid #FF0099;
32 background-color:#FFCCFF;
33 width:760px;
34 }
35 </pre></div>
36 </div>
37 </body>
38 </html>This method should be ideal, but unfortunately, Internet Explorer 6 does not correctly understand display:table and display:table cell, so this method is used in
Is not valid in Internet Explorer 6 and below. Well, it's depressing! But we have other ways IV. solutions in Internet Explorer
In Internet Explorer 6 and below, there are defects in height calculation. After locating the parent element in Internet Explorer 6, if the child element
When calculating percentage, the basis of calculation seems to be inherited (if the value of positioning is absolute, there is no problem, but the basis of using percentage calculation will no longer be the basis of this element
Height, and the positioning height inherited from the parent element). For example, we have the following (X)HTML code segment:
<div id="wrap"> <div id="subwrap"> <div id="content"> </div> </div> </div>
If we absolutely locate the subwrap, the content will also inherit this attribute. Although it will not be displayed immediately in the page, if we enter the content again
When the line is relatively positioned, the 100% score ratio you use will no longer be the original height of content. For example, we set the position of subwrap to 40%. If we want to make the position of content
If the edge coincides with wrap, you must set top:-80%; Then, if we set the top of the subwrap to 50%, we must use 100% to return the content to its original position
But what if we set content to 50%? Then it's just vertically centered. Therefore, 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 with computing problems such as Internet Exlporer 6. (but I don't understand. I checked many articles. I don't know it's because
It seems that many people are reluctant to explain the principle of this Bug in Internet Exlporer 6. I just know a little about it and need to study it again)
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <title> Multiline text vertically centered </title>
5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6 <style type="text/css">
7 body { font-size:12px;font-family:tahoma;}
8 div#wrap {
9 border:1px solid #FF0099;
10 background-color:#FFCCFF;
11 width:760px;
12 height:400px;
13 position:relative;
14 }
15 div#subwrap {
16 position:absolute;
17 top:50%;
18 }
19 div#content {
20 position:relative;
21 top:-50%;
22 }
23 </style>
24 </head>
25 <body>
26 <div id="wrap">
27 <div id="subwrap">
28 <div id="content"><pre>Now we want to center this text vertically!
29 div#wrap {
30 border:1px solid #FF0099;
31 background-color:#FFCCFF;
32 width:760px;
33 height:500px;
34 position:relative;
35 }
36 div#subwrap {
37 position:absolute;
38 border:1px solid #000;
39 top:50%;
40 }
41 div#content {
42 border:1px solid #000;
43 position:relative;
44 top:-50%;
45 }</pre>
46 </div>
47 </div>
48 </div>
49 </body>
50 </html>5, Perfect solution
Then we can get a perfect solution by combining the above two methods, but it requires the knowledge of CSS hack. If you use CSS hack to distinguish browsers, you can
Refer to this "simple CSS hack: distinguishing IE6, IE7, IE8, Firefox and 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%;
} So far, a perfect centering scheme has been produced.
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <title> Vertical multi line text centering </title>
5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6 <style type="text/css">
7 body { font-size:12px;font-family:tahoma;}
8 div#wrap {
9 display:table;
10 border:1px solid #FF0099;
11 background-color:#FFCCFF;
12 width:760px;
13 height:400px;
14 _position:relative;
15 overflow:hidden;
16 }
17 div#subwrap {
18 vertical-align:middle;
19 display:table-cell;
20 _position:absolute;
21 _top:50%;
22 }
23 div#content {
24 _position:relative;
25 _top:-50%;
26 }
27 </style>
28 </head>
29 <body>
30 <div id="wrap">
31 <div id="subwrap">
32 <div id="content"><pre>Now we want to center this text vertically!
33 div#wrap {
34 border:1px solid #FF0099;
35 background-color:#FFCCFF;
36 width:760px;
37 height:500px;
38 position:relative;
39 }
40 div#subwrap {
41 position:absolute;
42 border:1px solid #000;
43 top:50%;
44 }
45 div#content {
46 border:1px solid #000;
47 position:relative;
48 top:-50%;
49 }</pre>
50 </div>
51 </div>
52 </div>
53 </body>
54 </html>The value of vertical align in the vertical center of p.s. is middle, while the value of horizontal align is center. Although they are both centered, the keywords are different