For inline elements, or for elements with display set to inline-block,

Vertical alignment doesn’t work as well as we think.

To get down to business:

Vertical-align: baseline, top, middle, bottom, text-top, text-bottom

The vertical-align attribute is valid only for inline elements (or block-level elements of display: inline-block) and is positioned according to the parent element’s position.

  • In plain English, this attribute is used to determine the vertical distance between the elements in this row and their parent elements



The image and XXX are inline elements, and you can see that they are aligned at the bottom.

<div class="div1">
    <img src="https://img.alicdn.com/bao/uploaded/i1/1780989163/TB1gFpJlf2H8KJjy0FcXXaDlFXa_!! 0-item_pic.jpg_300x300q90.jpg" alt="">
    <span>xxxxxxxx</span>
</div>Copy the code

span{
    vertical-align:baseline;
}Copy the code

So under what circumstances does the baseline position change?

  • If the parent element height is separated by a child element

If the child element is a picture, changing the height of the picture changes the position of the baseline;

If the child element is text, change the font
font-sizeand
line-heightProperty, all change the location of the baseline

  • If the parent element contains more than one
    inline-blockProperty value, and these elements are set
    Vertical-align: baseline attribute, and then a funny thing happens, all the elements in this row are going to be a baseline, change the baseline of one element, change the baseline of all the other elements. The position of the baseline is aligned with the baseline of the lowest child or parent element of the baseline.

So that’s the question about baseline

Other values as follows are described as follows:

value

 describe
sub

 Vertically align the subscript of the text.
super

 Vertically align the superscript of the text
top

 Align the top of the element with the top of the highest element in the row
text-top

 Align the top of the element with the top of the parent element’s font
middle

 Place this element in the middle of the parent element.
bottom

 Align the top of the element with the top of the lowest element in the row.
text-bottom

 Align the bottom of the element with the bottom of the parent element’s font.
length
%

 Order this element using the percentage value of the “line-height” attribute. Negative values are allowed.
inherit

 Specifies that the value of the vertical-align attribute should be inherited from the parent element.