Div text vertical center horizontal center Div CSS text vertical center horizontal center

Http://www.jeecn.com

The vertical text Center Method in the DIV layer sometimes needs to vertically center the text in some Div layers on the pages designed by Div + CSS for the aesthetic design of the webpage, there are many methods for multi-line text and single-line text, but there are not many simple introductions to the code. flymorn will introduce several suitable vertical center methods for div text.
First, you must know that vertical-align in CSS is invalid. W3C officially explained vertical-align as follows: "This property affects the vertical positioning inside a line box of the boxes generated by an inline-level element."

In fact, a box consists of many rows and many elements. Vertical-align only acts on elements in the same row, and its vertical is not relative to the entire box. A 60 PX height is defined above, but there are many lines in this box, and the text cannot be aligned to the center. Therefore, if you want to align the text in the middle, you need to define a line-height attribute for it, so that the line-height is 60px, and it can work on the vertical-align of a line.

To vertically center a single line of text, you only need to ensure that the DIV height and the row height are consistent. Use the following code:

CSS code:
# Div-{
Height: 60px;
Line-Height: 60px;
}

XHTML code:
<Div id = "div-a">

Vertical center of Div text

</Div>

 

If you want to center the text in the DIV horizontally, add "text-align: center;". The Code is as follows:

CSS code:

# Div-{
Text-align: center;
Height: 60px;
Line-Height: 60px;
}

XHTML code:
<Div id = "div-a">

CSS Div text
Vertical center



Div CSS text
Horizontal Center

</Div>

Note: If the parent-level element defines text-align: center, this means that the content in the parent-level element is centered. for IE, this setting is enough. However, it cannot be centered in Mozilla. The solution is to add "margin-Right: auto; margin-left: auto;" when the sub-element is defined ;".

However, if there are multiple lines of text, the vertical center method above will not work, and it must be implemented using a flexible method. We recommend that you use the table method and place the corresponding Div outside the table, the Code is as follows:

<Table>
<Tr> <TD style = "vertical-align: middle; Height: 300px; Background-color: Red">

Center Method
</TD> </tr>
</Table>

There is another way to center multiple lines of text:

The multi-row content is centered and the container height is variable. It is easy to give consistent padding-bottom and padding-top:

. Middle-demo-2 {
Padding-top: 24px;
Padding-bottom: 24px;
}

Advantages:
1. Both block-level and inline polar elements are supported.
2. Supports non-text content
3. Support for all browsers
Disadvantages:
Container cannot be fixed height (reference)

You can use the background method to vertically center an image in a div. As follows:

Body {
Background: URL (http://www.jeecn.com

) # Fff no-repeat center;
}
The key is the final center. This parameter defines the image position. It can also be written as "top left" (upper left corner) or "bottom right", or "50 30 ".