css code to realize text vertical centering_Experience exchange-www.jb51.net-css vertical centeringwww.jb51.net css vertical centering

How to set the text in CSS so that the text in the object is vertically centered on the object is also a problem that bothers many friends. Many codes on the Internet today are not browser compatible. I sorted out the relevant methods on the Internet and made some changes. It is completely compatible with all mainstream browsers.
Let’s talk about vertical centering methods in different situations.
1. A line of text is vertically centered
Look at the following code:

html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script> <br>function sel(id) {switch(id) {case "1":document.getElementById("sub").style.lineHeight = "normal";break;case "2":document.getElementById("sub").style.lineHeight = "20px";break;case "3":document.getElementById("sub").style.lineHeight = "28px";break;}} <br></script>

一行文字垂直居中，此对象高度为20px

默认值，设置行高为：normal 设置行高和对象高度相同：20px 设置行高比对象的高度大：28px

Method: line-height:20px. Set the same row height and object height.

Description: This setting is simple and compatible with various browsers, and supports inline objects. But if it is an object with a fixed height, only one line can be displayed. When there are two lines of text, if "overflow:hidden" is not set, the object will be stretched.
2. Multi-line text and highly adaptive
Please see the following code:

Method: padding-top:10px; padding-bottom: 10px. Set the same top and bottom padding.

Description: Compatible with various browsers, supports inline objects, and also supports non-text objects, such as img. But one disadvantage is that the height of the object cannot be fixed.

3. Vertically center multi-line text with a fixed height

This method is more complicated, and I will explain it in detail. Let’s look at the code first:

Method:

(1) vertical-align:middle; display:table-cell. The meaning of this method is to force the object to a Table. The function of vertical-align:middle is the same as valign="center" in the table.

This is originally a very convenient attribute, but IE does not support this attribute. In order to make each browser compatible, we have to think of other methods.

(2) Create a sub-object within the object, and create a sub-object or paragraph within the sub-object. In the web page:

There are multi-line text here, the height is 50px There are multi-line text here, the height is 50px

phpcnltphpc n/p>

In CSS:

p {margin:0;}: Because P has spacing by default in FireFox

#a {height:50px;position:relative;}: Set the height to 50. If you want the sub-object to be positioned relative to it, set position: relative

#a p {*position:absolute;*top:50%;}: add an asterisk "*" in front of it Only supported by IE, other browsers will ignore this setting. position:absolute sets the positioning of this child object to absolute positioning, top:50% sets the display at 50% from the top, that is, 25px (because the height of the parent object is set to 50px above).

#a p p {*position:relative;*top:-50%;}: This code can only be understood as moving upward by 50% of the remaining height. Because top is set to a negative value, it is equivalent to moving in the opposite direction.

Description: Supports mainstream browsers (tested under IE6, FireFox2).