[CSS] Vertical-align

Original address:

Http://www.zhangxinxu.com/wordpress/2010/05/%E6%88%91%E5%AF%B9css-vertical-align%E7%9A%84%E4%B8%80%E4%BA%9B%E7 %90%86%e8%a7%a3%e4%b8%8e%e8%ae%a4%e8%af%86%ef%bc%88%e4%b8%80%ef%bc%89/

1. First, for numerical values , see the following example:

. test{vertical-align:-2px;}

I understand that the element is shifted down by two pixels relative to the baseline, which is often used to fix an issue where the Radio box/check box is misaligned with the size of the 12 pixel text. There's nothing to say about this.

2. Furthermore, with regard to the percentage value , the hundred points and the values, in my view, represents the different thoughts, as well as the mentality. The former represents flexibility, freedom and openness, the latter with rigorous, precise, secure meaning. There are many attributes in CSS that support the percent score, such as Width/height,line-height,font-size, where the Vertical-align attribute is also one. When referring to a percentile, it is bound to involve relative to that attribute (or value), for example, the width percentage is relative to the width of the parent block element, and the font-size percent is relative to the font-size size of the outer first layer containing the font-size attribute, And here the vertical-align, some eclectic, is relative to this tag inherits the Line-height value to decide. For example, the following sample code:

. test{vertical-align:-10%;}

Assuming that the tag of the. Test here inherits a row height of 20px, the vertical-align:-10% actual value represented here is: -10% * 20 = 2(像素) . But things are not so simple, CSS line-height is a very profound attribute, I suggest you look at the article I wrote earlier: CSS line high line-height some deep understanding and application, so encountered like ie6/ IE7 the browser that eats Sanlu milk powder will surely make a little mess. What the hell is that? Thepercent value of vertical-align under Ie6/ie7 Browser does not support decimal line-height. "You can look at the percentage of vertical-align that I've processed that inherits from the small value line-height. [Participants: IE6 (audience throwing eggs) and Firefox3.6 (beauty send flowers)]:

If you are now using IE6 or IE7 or IE6/7 kernel browser, and relative to this bug has insight, you can click here: Ie6/7 vertical-align hundred points and line-height small value bug

If you don't want to see the bad behavior of IE that makes you angry, you can click here: Non-fractional line-height repair demo.

3. Finally about other attributes, such as Bottom,middle, I am too lazy to say what, why? You can look at this compatibility table below:

compatibility (vertical-align)

Internet Explorer				Firefox					Safari				Opera			Chrome
5.5	6.0	7.0	8.0	1.0	1.5	2.0	3.0	3.5	1.3	2.0	3.1	4.0	9.2	9.5	10.0	2.0
Buggy	Buggy	Buggy	Buggy	Buggy	Buggy	Buggy	Buggy	Buggy	Buggy	Buggy	Buggy	Buggy	Full	Full	Full	Buggy

This is the Vertical-align compatibility table of the foreigner predecessors, although I do not know the Opera browser column full is what the meaning, but "buggy" know, is bug swarms, bug piles of meaning, I think, A simple study will note that the differences between browsers are really obvious.

Third, why does my vertical-align attribute not work?

Only one element is either inline or Inline-block (Table-cell can also be interpreted as inline-block level), and the Vertical-align attribute on its body will work. So, code like the following does not work:

Span{vertical-align:middle;} Div{vertical-align:middle;}
Although the Vertical-align property only works on elements of the inline-block level, it affects elements that involve the elements of the inline property, and it is important to remember that Inline horizontal elements are subject to change by the Vertical-align attribute but not because of their sensitivity to the vertical-align attribute, but rather by the change in the entire line box, which is later analyzed in more depth.
For details, see: http://www.zhangxinxu.com/study/201005/verticle-align-test-demo.html

Iv. Text-top

<div style= "line-height:200px; border:1px solid #34538b; " >    <span style= "font-size:60px; border:1px solid #a0b3d6; vertical-align:text-top;" > Big text </span> behind is still text. </div>

text-top    Aligns the top of the box with the top of the parent element ' s font

To align the top of the current box with the top of the parent element's text

So as soon as we get to the top of the box and the top of the parent element's text, we can see what this kind of performance is, and which is more in line with its definition.

1. Modern Browser performance

Top of the current box: Yellow box Top

Top of the text of the parent element: the top of the gray text, because of the line-height:200px of the parent element, so the height of the text is 200px;

2. IE Family Performance

At the top of the current box: The top of the current element text, which is the large text.

The top of the text of the parent element: the top of the gray text,

ie: Ignore the definition of vertical-align,Vertical-align:text-top is the alignment between two paragraphs, the top of the span text is aligned with the top of the bare text behind

IE8 the height of 227 pixels, this extra 27 pixels is 60 pixels of text down with the text at the top of the distance, which is similar to the parent tag in modern browsers, IE8 browser can be said to be improved, but at the top of the understanding of the parent element seems to deviate from the modern browser, I do not know what will be a performance under the IE9 browser. Wait and see.

[CSS] Vertical-align