Discuss vertical-align _css/HTML

Source: Internet
Author: User
Discuss vertical-align Application Comparison with valign

Vertical-align explains in the light rain manual that it sets or retrieves the vertical method of the object content. What I don't quite understand is that vertical-align is classified as "attribute/text"

O3noBLOG emphasizes the difference between vertical-align and valign. It is true that vertical-align applies the most in td, and controls the internal object location, which is very similar to the valign attribute of td.

Valign has four parameters: top, baseline, bottom, and middle. vertical-align also has the same attribute value. The following is a comparison of td control:



Use vertical-align: top; to avoid td's default valign = "middle" is a good choice. Of course, you can also use vertical-align: middle; to control td, however, p is definitely invalid.

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

Comparison with align

As prompted by w3, vertical-align is used on the inline object, such as img control, so it is similar to the align attribute of img.

When you use align = "absmiddle" to control the absolute center of the img, you can also use vertical-align: middle; to make a clear comparison:


Therefore, the true absolute center is still align = "absmiddle", which is irreplaceable with CSS.

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

Inline Application

Used to determine the vertical position of the inline object. See two examples:

Small figure: http://www.rexsong.com/blog/attachments/20...ignmenttest.htm
Big picture: http://www.rexsong.com/blog/attachments/20...rticalalign.htm

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.