Shulou(Shulou.com)06/03 Report--

This article mainly explains "how to understand the vertical-align in CSS attributes". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "how to understand vertical-align in CSS attributes".

I. Preface

The most common use of vertical-align for beginners is in tables, especially for children's schools using dreamweaver. The number of top,middle,bottom is common, and others should be rarely used. However, because of the many attributes of vertical-align, the situation is also a little complicated. Let's take a look at Baidu and Google common questions:

What is the meaning of 1.vertical-align?

2.vertical-align picture and text alignment compatibility issues?

The 3.vertical-align attribute value is compatible with each browser.

How does 4.vertical-align achieve vertical centering of images?

How does 5.vertical-aling align input [type = 'checkbox'] and input [type =' radio'] with text?

6. Why doesn't the vertical-align property I set work?

What is the impact of 7.line-height on vertical-align attributes?

……

II. Introduction of vertical-align attributes

1. Scope of application:

Vertical-align specifies the vertical alignment of inline (inline/inline-block) or table cell (table-cell) elements.

two。 Available values:

Value inline elements (inline) elements in table cells (table-cell)

The baseline element baseline is aligned with the parent element baseline. Some replaceable elements, such as textarea, the HTML standard does not specify its baseline, using this tag is that the performance of each browser may differ from that of the baseline of the peer cell

The sub element baseline is aligned with the subscript baseline of the parent element

The super element baseline is aligned with the superscript baseline of the parent element

The top of the text-top element is aligned with the top line of the font of the parent element

The bottom of the text-bottom element is aligned with the bottom line of the font of the parent element

The length element baseline exceeds the specified height of the parent element's baseline. You can take a negative value

Percentage is the same as length, percentage relative to line-height

The center line of the middle element is centered perpendicular to the center line of the lowercase letter of the parent element.

The top of the top element and its descendants are aligned with the top of the whole row (relative to the whole row), that is, the top of the element's inline box is aligned with the top of the row box, and the upper edge of the inner margin of the cell is aligned with the top of the row.

The bottom of the bottom element and its descendants are aligned with the bottom of the whole row (relative to the whole row), that is, the bottom of the inline box of the element is aligned with the bottom of the row box, and the bottom edge of the inner margin of the cell is aligned with the bottom of the row.

3. Based on the above description, let's first look at a few basic concepts:

1) baseline, top line, center line, bottom line

: 1-> top line

: 2-> baseline

: 3-> bottom line

: 4-> midline

2) Row height

Distance between baselines of adjacent lines of text

3) Line spacing

The distance between the base line of the previous text line and the top line of the next text line

4) inline box

The inline box is a concept in the browser rendering model that cannot be displayed, but it does exist, and its height is the height specified by the row height.

5) Row frame (line box)

A row box refers to a virtual rectangle of the line and is a concept in browser rendering mode. The height of the row box is equal to the largest value of the inline box of all elements in the row (based on the inline box with the highest row height value, the other inline boxes are aligned to the base in their own way, and the height of the row box is finally calculated).

6) content area

The content area refers to the area wrapped by the bottom line and the top line (the inline element display:inline can be displayed by the background-color attribute), which may not be visible in practice, but it does exist. The size of the content area varies according to the value and number of words of the font-size.

4. Property for each browser test

1) for inline elements

The expression of the vertical-align attribute value is related to the parent element (div.parent) and has nothing to do with the performance of the sibling element.

To be sorted out...

2) for cell elements

The default values for table cell elements are as follows:

Td: align left + center vertically

Th: horizontal Center + Vertical Center

Vertical centered inheritance: td/th inherits from tr, inherits from tbody/thead

To be sorted out...

Third, common applications:

To be sorted out...

Thank you for your reading, the above is the content of "how to understand vertical-align in CSS attributes". After the study of this article, I believe you have a deeper understanding of how to understand vertical-align in CSS attributes, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.