CSS Properties vertical Align basic use method

CSS has a property called vertical Align. It's a bit confusing when you first learn it, so I think we can learn it by its usage. The most basic usage is like this:

img{
Vertical-align:middle;
}

Note that in this application case, it is applied to the IMG element. A picture is usually an inline element, meaning it is usually with text. But what exactly does "together" mean? This is what vertical-align to solve.

Valid values are: baseline,sub,super,top,text-top,middle,bottom,text-bottom,length or percent values.

I think the most confusing thing is that when you try to use Vertical-align for block-level elements, you don't get any results. If you have a large div that contains a small div, you want the small to be centered vertically within the large, vertical-align can't help you. Douglas Heriot has a good way to achieve this effect.

Baseline

The default value for Vertical-align is baseline (if you don't make any statement). The pictures and text are based on the baseline of the text. Note that the downlink letters descend below the baseline. The picture is not aligned with the lower end of the downward letter, which is not the baseline.

Middle

Perhaps the most common use of vertical-align is to set the picture of the icon size to "middle". The result has cross-browser consistency.

The browser is able to align text and pictures precisely:

Be careful if the picture is Gaoyao larger than the current text and line, it pushes down the following line when needed:

Text-bottom

Unlike the baseline, it is the bottom of the text and the direction of the downward text. The picture can also be aligned nicely with it.

Text-top

The opposite of Text-bottom is Text-top, the highest point in the current text. You can also align them in turn. Note that the following text, Georgia font, the top is a little higher than the picture.

Top and bottom

Top and bottom are similar to text-top and Text-bottom, but they are not limited by text and depend on everything in the line (such as another picture). So if a row has two pictures, different heights, and they're bigger than the text in the row, their top (or bottom) is aligned, regardless of the size of the text.

Sub and Super

The two values mean superscript and subscript, so the elements align themselves in this way as follows:

Align vertically in a table

Unlike pictures, the table defaults to center vertical alignment:

If you want the text to be aligned with the top or bottom of the table, apply tops or bottom.

When applying a vertical-align to a table, it depends on the top, bottom, or center alignment to see luck. None of the values can be explained through, and different browsers have unpredictable results. For example, when applying text-bottom alignment to text in a table, the IE6 is at the bottom, and the SAFARI4 is at the top. Set to Sub,ie6 is in the middle, Safari4 is at the top.

Vertical Align and Inline-block

The picture, in theory, is an inline element, but it behaves like a block-level element in the row. You can set it to a height and width, it will obey, unlike other inline elements.

Apply Vertical-align to the block-level elements in the row, as shown in the picture, which is vertical-align at least to your concern. But that's another story ...

Do not use abbreviations

Usually you will see "valign" in the table to achieve vertical alignment. For example, <td valign=top>. It should be explained that this abbreviation should not be used. There's really no reason to use CSS like this.