css-some problems of using line-height to achieve vertical centering

This is said on the Internet, the Line-height value is set to the same size as the height of the value can achieve the vertical center of single-line text. This is indeed true, but there are problems in fact. The problem is height, look at my statement: "Set the line-height to the size of the box you need to achieve the vertical center of single-line text", the difference is that I removed the height, this height is superfluous, you do not believe you can try it yourself.

Vertical centering of multiline text

To achieve the height of the text perpendicular to the vertical center using the padding is good. For a high-fixed div, the text line or multiline display, the font size has a lot of small situation how to do? One way is to use Line-height.

Comment Diagram for demo page:

As mentioned above, the height of line boxes depends on the maximum height of its subordinates. This height is accomplished by a space that does not occupy any space, even if the font-size is set to 0,line-height for the desired height. At the same time, we need to set the display property to Inline-block in order to separate line boxes and to keep it on one row. The following code is different from the demo:

CSS code:

. mulit_line{line-height:150px, border:1px dashed #cccccc; padding-left:5px; font-size:0;}. Mulit_line span{display:-moz-inline-stack; display:inline-block; line-height:1.4em; vertical-align:middle;}. Mulit_line i{width:0; display:-moz-inline-stack; display:inline-block; vertical-align:middle;}

Thanks to Konishi's reminder, the following code fixes the IE8 issue:

1 . Mulit_line{Line-height:150px;Border:1px dashed #cccccc;Padding-left:5px;}2 . Mulit_line span{Display:-moz-inline-stack;Display:Inline-block;Line-height:1.4em;vertical-align:Middle;}3 . Mulit_line I{width:0;Display:-moz-inline-stack;Display:Inline-block;vertical-align:Middle;font-size:0;}

HTML code:

1 <p class= "Mulit_line" > 2     <span > here is a multi-line text within a 150-pixel height tag, with a text size of 12 pixels. <br/> Here is the second line, which is used to test the display effect of multiple rows. </span><i>&nbsp;</i>3</p>

Excerpt from Zhang Xin Asahi's blog, more: http://www.zhangxinxu.com/study/200908/img-text-vertical-align.html

Summarize:

To center the multiline text vertically in a fixed-size div :

1 <div class= "Yellowbox" > 2     <p><span>guangzhou Haisan Entertainment Technology Co., Ltd.: The water park Equipment Company I N china</span></p>3</div>

The first step is to place the text in span under the P element.

The second step is to set the P element height to the div (line-height=div height of p).

The third step, span is inline-block, and Vertical-align is middle (line-height reset).

css-some problems of using line-height to achieve vertical centering