Several Simple CSS style setting methods for text Center

The vertical-align attribute in CSS takes effect only 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.

 

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:

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.

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:

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.

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:

Div # wrap {
Height: 400px;
Display: Table;
}
Div # Content {
Vertical-align: middle;
Display: Table-cell;
Border: 1px solid # ff0099;
Background-color: # ffccff;
Width: 760px;
}

 

4. 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 ":

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.