Implement vertical centering of text within Div layer (GO)

Sometimes, in order to beautiful web design, you need to div+css design of the page in some div layer text vertically centered, including multiple lines of text and a single line of text, there are many methods, but the real can be achieved while the code and concise introduction of not much, Flymorn to introduce a few of the applicable div text vertically centered method.

First of all to know the CSS vertical-align invalid, the official vertical-align made the following explanation: "The 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 lines of elements, vertical-align only for elements within the same line, and its vertical is not relative to the entire box. The above defines a height of 60px, but there are many lines in this box, and the text does not align to the center. So hopefully that text aligns to the middle, you need to define a Line-height property for it, let Line-height be 60px, and work on a line of vertical-align.

If a single line of text wants to be centered vertically, just keep the div high and row height consistent. This can be done with the following code:

CSS code:

1234	#div-a{height:60px;line-height:60px;}

XHTML code:

123	<divid="div-a">......</div>

If you want the text in the div to be centered horizontally, add "text-align:center;" Code as follows:

CSS code:

12345

#div-a{text-align:center;height:60px;line-height:60px;}

XHTML code:

1234	<divid="div-a">....</div>

Description: If the text-align:center is defined in the parent element, this means that the content within the parent element is centered, and the setting for IE is already available. But it can't be centered in Mozilla. The solution is to add "Margin-right:auto" when the child element is defined; Margin-left:auto; ".

However, if it is multi-line text, the vertical center of the above method is not possible, you have to use a workaround, it is recommended to use the table method, outside the table with the corresponding Div,

The code is as follows:

1234	<table><tr><tdstyle="vertical-align:middle;height:300px;</td></tr></table>

There is another way to center multiple lines of text:

Multi-line content is centered, and the container is highly variable and simple, giving consistent padding-bottom and padding-top on the line:

12345

.middle-demo-2{padding-top: 24px;padding-bottom: 24px;}

Advantages:
1. Supports both block-and inline-pole elements
2. Support for non-textual content
3. Support all Browsers

Disadvantages:
Container cannot be fixed height

How to make a picture vertically centered in a div, you can use the background method. As follows:

1234	body{BACKGROUND:url(http://www.piaoyi.org/images/logo.gif) #FFF no-repeat center;}

The key is the final center, which defines the position of the picture. It can also be written as "top left" or "bottom right", or the value "50 30" can be written directly.

Implement vertical centering of text within Div layer (GO)