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

This article mainly introduces "what is the css vertical align alignment rule". In the daily operation, I believe many people have doubts about what the css vertical align alignment rule is. The editor consulted all kinds of materials and sorted out a simple and easy-to-use operation method. I hope it will be helpful to answer the question of "what is the css vertical align alignment rule?" Next, please follow the editor to study!

The prerequisites for cssvertical-align alignment rules to work can only be applied to inline elements and to elements with a displayvalue of table-cell. The vertical-align attribute can only be applied to elements whose display evaluates to inline, inline-block,inline-table, or table-cell. Therefore, by default, inline elements such as span, strong, em, replacement elements such as img, button, input, custom tag elements that are not in the html specification, and cells all support the vertical-align attribute, while other block-level elements do not.

Vertical-align:inline-block and baseline

The default value of the vertical-align attribute, baseline, is the lower edge of the character x in inline elements such as text, and the lower edge of the replacement element in the case of a replacement element. However, if it is an inline-block element, the rule is more complicated: an inline-block element, if there is no picture and text in it, or if overflow is not visible, then the baseline of the element is the bottom edge of its margin; otherwise, its baseline is the baseline of the picture and text in the last line of the element. See the vertical-align.html of the demo:inline-block element

Vertical-align:middle to achieve vertical centering

Inline element: the vertical center point of the element is aligned with the row box baseline up 1/2x-height. The vertical-align:middle definition is the alignment of the centerline of the element to the center point of the character x

Table-cell element: the cell fill box is centered relative to the outer table row. The table-cell element sets the vertical alignment of the vertical-align to the child elements, but it is not the child elements that function, but the table-cell elements themselves. Even if the child element of the table-cell element is a block-level element, it can still have a variety of vertical alignment.

Middle aligns the vertical midpoint of the element box with the baseline of the parent box plus half of the x-height of the parent box. Here, it is easy to determine the vertical midpoint of the element box and the baseline of the parent box, but x-height has to calculate that this x-height is the height of the letter x.

At this point, the study of "what are the rules of css vertical align alignment" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.