Explore vertical-align application_CSS/HTML

Comparison with valign

The explanation of vertical-align in the Xiaoyu manual is: setting or retrieving the vertical alignment of the object content. What I don’t quite understand is that the category of vertical-align is “attribute/text”

O3noBLOG particularly emphasizes the difference between vertical-align and valign. Indeed, the most common application of vertical-align should be in td. , controls the position of internal objects, and is very similar to the valign attribute of td.

valign has four parameters: top, baseline, bottom, middle. Relatively speaking, vertical-align also has the same attribute values. The following is a comparison of td control:



It is a good choice to use vertical-align:top; to avoid the default valign="middle" of td. Of course, you can also use vertical-align:middle; to control td, but it is definitely invalid for div.

Effect demonstration: http://www.rexsong.com/blog/attachments/20...1246_valign.htm

Comparison with align

Follow the tips of w3 and use vertical-align on inline objects, such as the control of img, so it is similar to the align attribute of img.

When using align="absmiddle" to control the img to be absolutely centered, you can also try to use vertical-align:middle; for a comparison to see more clearly:

So the real absolute centering is align="absmiddle", which is irreplaceable by using CSS.

Effect demonstration: http://www.rexsong.com/blog/attachments/20...41444_align.htm

inline application

is used to determine the vertical position of inline objects, see two examples:

Small picture: http://www.rexsong.com/blog/attachments/20... ignmenttest.htm
Large image:http://www.rexsong.com/blog/attachments/20...rticalalign.htm