Most of the time, it seems that such a problem cannot be considered a problem. However, there are often some problems in our initial solution :(
Today, I took the time to write this down. Mark it first.
Maybe someone will ask if CSS does not have the vertical-align attribute to set vertical center? Even some Browsers Do not support CSS hack technology! So here I want to say that CSS does have the vertical-align attribute, but it only takes effect for elements with the valign attribute in (x) HTML elements, for example, <TD>, <TH>, and <caption> in table elements, but elements like <div> and <span> do not have the valign feature, therefore, using vertical-align does not work for them.
CSS webpage layout Div horizontal center Methods
1. Vertical center of a single row
If a container contains only one line of text, it is relatively easy to center it. We only need to set its actual height to be equal to the line-height of its row. For example:
Code snippets provided by imoker.cn (imoke:
Div {
Height: 25px;
Line-Height: 25px;
Overflow: hidden;
}
This code is simple. The overflow: Den den setting is used later to prevent the content from exceeding the container or generating automatic line breaks, so that the vertical center effect cannot be achieved.
Code snippets provided by imoker.cn (imoke:
<! 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> align a single line of text vertically </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 vertical! </Div>
</Body>
</Html>
However, in Internet Explorer 6 and earlier versions, this method does not support vertical center for images.
2. Vertical center of multi-line unknown height text
If the height of a piece of content is variable, we can use the last method used in the implementation of horizontal residence described in the previous section, that is, setting the padding, make the upper and lower padding values the same. Similarly, this is also a vertical center mode of "looks". It is just a way to completely fill the text with <div>. You can use code similar to the following:
Code snippets provided by imoker.cn (imoke:
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 application is that the container height must be scalable.
Code snippets provided by imoker.cn (imoke:
<! 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> vertical center of multiple lines of 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 {
Padding: 25px;
Border: 1px solid # ff0099;
Background-color: # ffccff;
Width: 760px;
}
</Style>
</Head>
<Body>
<Div> <PRE> now we want to center the text vertically!
Div {
Padding: 25px;
Border: 1px solid # ff0099;
Background-color: # ffccff;
}
</PRE> </div>
</Body>
</Html>
3. Fixed height center of multiline text
At the beginning of this article, we have already said that the vertical-align attribute in CSS only works for (x) HTML tags with the valign feature, however, there is a display attribute in CSS that can be used to simulate <Table>. Therefore, we can use this attribute to allow <div> simulate <Table> to use vertical-align. Note: The use of display: Table and display: Table-cell 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:
Code snippets provided by imoker.cn (imoke:
Div # wrap {
Height: 400px;
Display: Table;
}
Div # Content {
Vertical-align: middle;
Display: Table-cell;
Border: 1px solid # ff0099;
Background-color: # ffccff;
Width: 760px;
}
Code snippets provided by imoker.cn (imoke:
<! 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> vertical center of multiple lines of 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 # wrap {
Height: 400px;
Display: Table;
}
Div # Content {
Vertical-align: middle;
Display: Table-cell;
Border: 1px solid # ff0099;
Background-color: # ffccff;
Width: 760px;
}
</Style>
</Head>
<Body>
<Div id = "Wrap">
<Div id = "content"> <PRE> now we want to center the text 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>
</Html>
This method should be ideal, but unfortunately Internet Explorer 6 does not understand display: Table and display: Table-cell correctly, therefore, this method is invalid in Internet Explorer 6 and earlier versions. Well, this is depressing! However, we have other methods.
4. Solutions in Internet Explorer
In Internet Explorer 6 and earlier versions, there are defects in high computing. After the parent element is located in Internet Explorer 6, if the percentage calculation is performed on the child element, the base of the calculation seems to be inherited (if the value to be located is an absolute value, there is no such problem, however, the base of percentage calculation is no longer the height of the element, but the height inherited from the parent element ). For example, we have the following (x) HTML code segment:
Code snippets provided by imoker.cn (imoke:
<Div id = "Wrap">
<Div id = "subwrap">
<Div id = "content">
</Div>
</Div>
</Div>
If we perform absolute positioning on subwrap, content will also inherit this attribute. Although it will not be immediately displayed on the page, if we perform relative positioning on content, the 100% aspect 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 top edge of content overlap with wrap, we must set top:-80%; then, if we set top of subwrap: 50%, we must use 100% to bring the content back to its original location. But what if we set the content to 50%? Then it is perpendicular to the center. So we can use this method to implement vertical center in Internet Explorer 6:
Code snippets provided by imoker.cn (imoke:
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 be used in browsers with computing problems such as Internet exlporer 6. (I have read a lot of articles, but I don't know whether the source is the same or why. It seems that many people are reluctant to explain the principle of this bug in Internet exlporer 6, I just learned a little bit about it and want to study it again)
Code snippets provided by imoker.cn (imoke:
<! 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> vertical center of multiple lines of 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 # 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>
</Head>
<Body>
<Div id = "Wrap">
<Div id = "subwrap">
<Div id = "content"> <PRE> now we want to center the text 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>
</Html>
5. Perfect solution
Then we can get a perfect solution by combining the above two methods, but this requires the knowledge of CSS hack. If CSS hack is used to differentiate browsers, you can refer to this "simple CSS hack: differentiate IE6, IE7, IE8, Firefox, and opera ":
Code snippets provided by imoker.cn (imoke:
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 Center solution has been created.
Code snippets provided by imoker.cn (imoke:
<! 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> vertical center of multiple lines of 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 # 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>
</Head>
<Body>
<Div id = "Wrap">
<Div id = "subwrap">
<Div id = "content"> <PRE> now we want to center the text 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>
</Html>
P.s. Vertical center vertical-align's value is middle, while horizontal Center Align's value is center, although the same is center, but the keyword is different.
References:
Http://www.imoker.cn/Article/ShowArticle.asp? ArticleID = 185
Http://www.cnblogs.com/blue.net/archive/2009/03/17/1414205.html
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
