[CSS Supplemental vertical-align] CSS Supplemental Vertical-align Properties Explained

I. About today, this article, and other

Today is a special day, because today is the day of the two anniversary of the Wenchuan earthquake, I am very lament, today is the international Nurses ' Day, I am very pleased to see the micro-Bo nurses shone cross-flow.

After a period of relaxed yy, get to the chase. 21st last month, a peer message to let me talk about vertical-align properties, I actually vertical-align attribute is also superficial knowledge, to say dare talk about "explain", say I have some understanding of vertical-align properties, purely personal opinion, If there are inaccuracies, we hope to forgive. Also, the Vertical-align attribute involved in the knowledge is too much, not an article can be clear, here I just pick a few typical or important places to say.

Before you begin, you want to know something about the following, the inline box model, the Inline/inline-block/block property. //zxx: About the inline box model, I made a special introduction to the "floating ' destructive '" section of this article .

Second, vertical-align a lot of messy properties

What does vertical-align mean? I window+d clear screen, double-click Open Youdao Desktop dictionary, input vertical, and then input align, "oh ~ ~ ~ ~", my head Flash, the original is "vertical" + "alignment" meaning, is vertical alignment!

In, is the vertical alignment of the meaning, first put aside, I see first to see what properties vertical-align support, I prefer the lightweight Dreamweaver, see his prompt attributes and what:

There is a saying is called "See How Not Strange", I reckoned these top,bottom attributes we have seen, nothing to see, nothing to say head. To be honest, I have a headache with the properties of these bugs, so forget about them and let's say something interesting. Vertical-align properties and values. See the table below:

Value	Describe
Length	Raise (positive) or lower (negative) elements by distance. ‘0cm‘equivalent to‘baseline‘
Hundred Score –%	1line-height1raise (positive) or lower (negative) elements by distance (relative to the percent size of the value). ‘0%‘equivalent to‘baseline‘
Baseline	Default. The baseline of the element is aligned with the baseline of the parent element.
Sub	Lowers the baseline of the element to the appropriate subscript position of the parent element.
Super	Raises the baseline of the element to the appropriate superscript position of the parent element.
Top	Aligns the top of the aligned child elements with the top of the line box.
Text-top	Aligns the top of the element with the top of the parent element's content area.
Middle	The vertical point of the element is aligned with the height of the parent element's baseline plus 1/2 of the letter x in the parent element.
Bottom	Align the bottom of the aligned child elements with the bottom of the line box.
Text-bottom	Aligns the bottom of the element with the bottom of the parent element's content area.
Inherit	The same specified value that takes the parent element's related property.

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)

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.

However, these attribute values are not vertical-align, and some properties, such as Text-bottom and middle, are sometimes used to correct some of the styling or to implement a particular layout. This back again ~ ~ But there is a bit of knowledge necessary to complement is, baseline,middle,top,bottom exactly what to refer to, look at this picture below, I was looking for a picture PS a good while:

The English book we used when we first learned English had four lines in each line, where the second line at the bottom was the baseline, and it was the bottom line of the letter a,c,z,x. The red line is the baseline.

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

Know that vertical-align is the vertical alignment of the meaning, many inexperienced peers will try to use this property to achieve some vertical alignment effect, you can find sometimes, sometimes do not work, do not know why? No hurry, slow down.

We know that display also has many attribute values, with Inline/inline-block/block three being the most common, which represents three different levels of elements on the page. I often visualize the liquid/solid-liquid mixed state/solid state, which corresponds to the real thing: milk/jelly/nuts.

We all know that everyone has a different hobby, some people like to eat sweets, some people like to eat spicy things, some people do not like to eat celery, some people do not like to eat mutton and so on. Some of the elements in CSS are the same, some of them are only interested in milk, some just like to eat nuts and jelly, and hate milk. And Vertical-align, is a more picky eaters, it just like to eat jelly, grew up eating jelly, no jelly, it will make a temper, you ignore. I call it the "jelly-dependent element", also known as the "Inline-block dependency element", meaning that only one element belongs to Inline-block (Table-cell can also be understood as Inline-block level), 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;}

The so-called Inline-block level element, which can both "suck" and "bite" elements, can be mixed with inline horizontal elements, but also can set high-wide attributes of the element. HTML controls such as which elements, examples, buttons, single check boxes, and single-line/multiline text boxes, are only those elements that work on the Vertical-align property by default.

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.

ZXX://is more busy recently, the following is written on 14th

Iv. How does the Vertical-align attribute work?

Here, I use the Vertical-align:middle attribute as an example of how I understand how vertical-align works.

The CSS Reference manual says that Vertical-align:middle is to put the current element in the middle of the parent element, roughly a read, seems to be so, but a thin thought, do not know what the specific point, vague concept. We start with a simple, step-by-step study of the principle of effectiveness.

1. A few simple examples
Here are a few simple examples, convenient to Vertical-align:middle have a preliminary visual understanding. As an example, create an element of the Inline-block property, the height and width of this element is 4 pixels, in order to compare the effect is obvious, I use black and white, background black, this 4 pixel pixels of the element is white, the vertical-align attribute is middle, Bottom and Text-bottom, of course, the text is necessary, otherwise how to see alignment! The entire instance of the HTML code is consistent, the only difference is a section of the Vertical-align property, the test environment is Firefox3.6 Browser, the HTML code is as follows:

<span class= "box" >    <span class= "dot" ></span>    I'm a piece of java. </span>

Instance One: Default property (i.e. baseline)
See the following CSS code:

. box{background:black; color:white; padding-left:20px;}. Dot{display:inline-block; width:4px; height:4px; background:white;}

Results such as:

Example two: Bottom
See the following CSS code:

. box{background:black; color:white; padding-left:20px;}. Dot{display:inline-block; width:4px; height:4px; background:white; vertical-align:bottom;}

Results such as:

Example three: Text-bottom
See the following CSS code:

. box{background:black; color:white; padding-left:20px;}. Dot{display:inline-block; width:4px; height:4px; background:white; vertical-align:text-bottom;}

Results such as:

Compared to Vertical-align:bottom and Vertical-align:text-bottom, their performance seems to be the same, in fact, the performance here is just a coincidence, how to say? To show the difference is simple, add a line-height value and you'll see a different place.

Example four: line-height:10px + vertical-align:bottom
See the following CSS code:

. box{background:black; color:white; padding-left:20px; line-height:10px;}. Dot{display:inline-block; width:4px; height:4px; background:white; vertical-align:bottom;}

The results are as follows:

And what if the Vertical-align attribute is Text-bottom?

Example five: line-height:10px + vertical-align:text-bottom
See the following CSS code:

. box{background:black; color:white; padding-left:20px; line-height:10px;}. Dot{display:inline-block; width:4px; height:4px; background:white; vertical-align:text-bottom;}

Results such as:

As you can see, the position of the small square point of the Vertical-align:text-bottom property does not change with the line-height, or it is aligned with the bottom of the text. If you look closely at the definition of text-bottom and the bottom attribute, you can find the reason for its performance: Text-bottom is aligned to the bottom of the text of the parent tag, and here is the text aligned to the "I am a card-wow" text in the back, Bottom is aligned with the bottom of the parent tag, and if you are familiar with the line box model and understand the nature of the heights, you will see why Line-height will change the position of the bottom of the label. This understanding helps to understand the process and principles of vertical-align:middle in force below.

Example six: Middle
See the following CSS code:

. box{background:black; color:white; padding-left:20px;}. Dot{display:inline-block; width:4px; height:4px; background:white; vertical-align:middle;}

The results are as follows:

[CSS Supplement vertical-align] CSS supplemental vertical-align Properties explained