“This article has participated in the good article call order activity, click to see: back end, big front end double track submission, 20,000 yuan prize pool for you to challenge!”

The first two lines of code that most people start to get their hands on is vertical centering

line-height: 24px;
height: 24px;
Copy the code

This concept can be misleading for beginners. Line-height is just one of the elements that controls the alignment of text. Here’s how and why these two lines of code alone don’t give you an accurate vertical center.

Vertical-align :baseline baseline

Which elements are inline?

All inline elements whose display is inline/inline-block/inline-table are inline elements.

In terms of behavior, “inline elements” are typically displayed on the same line as text, so form controls such as text/picture/button/input field/drop down are also inline elements. — From ZHANG Xinxu, CSS World

Important: Text is an inline element, aligned along the baseline. The answer to the question at the beginning of this article is that when you specify a line-height, all inline elements are still aligned along the baseline, so it is not possible to center text vertically using a line-height alone.

What is the baseline?

Lowercase xThe lower edge of theta is our baseline

It is easy to think that lowercase letters are axisymmetrical, with flat top and flat bottom, rather than curved top and bottom like s.

Extended concept: X-height

Definition: Height extension of lowercase letter x: The size unit ex is a relative unit in CSS, referring to the height (x-height) of lowercase letter x.

Line-height (line height)

Defines the spacing between two lines of baseline

Possible values:

  • Value: All child elements inherit this value
  • Percentage or length value: All child elements inherit the final calculated value

Tip: The inline element span cannot be set to a width or height, but line-height is supported

Line-height’s best gay friendvertical-align

Value of the vertical-align property

  • Class: baseline (default)/top/middle/bottom
  • Text: text-top/text-bottom
  • Subscript class: SUB /super
  • Numeric percentage class: 20px/2em/20%(the last two are less used)

Height +vertical-align:middle

Middle is the x-height alignment 1/2 up the base line, which can be approximated as the position where the letter X crosses

It is not absolutely centered, because different fonts have different positions in the box. For example, Microsoft Yahei is a font with more sink, all characters are placed a little bit lower than other fonts, and the cross point of the letter X is a little bit lower than the dividing line in the container.

Vertical-align is a number that solves the exact vertical center problem

Vertical-align :baseline :0; vertical-align:0 baseline :0; vertical-align:baseline :0

vertical-align:-5px;
Copy the code

Note: vertical-align action condition

Vertical-align may seem good to some people, but sometimes it doesn’t work, but you need to know the condition: it only works on inline elements and elements with a display value of table-cell

Display: Flex +align-items: Center: Display: Flex +align-items: Center

Why don’t we try it first

As you can see, the universal Flex layout implements vertical centering of text, but text is affected by many factors, and accurate vertical centering is actually difficult to achieve.

Supplementary knowledge: The height of the div is determined by the row height

  1. Knowledge supplement: Replace elements (such as image/video/input)
  2. Line spacing = line-height – font-size
  3. Half space = line space over 2

For block-level elements, line-height has no effect on the block-level elements themselves. The height of block-level elements is actually changed by changing the height of inline elements in the block-level elements

  • For purely inline elements that are not replacement elements, the visible height is entirely determined by line-height
  • Plain text: line-height determines the final height
  • Children contain replacement elements, and line-height can only determine the minimum height

    The reason is that the height of the replacement element is not affected by line-height, and the vertical-align attribute is behind it

Interesting concept: ghost blank nodes

Inline elements are all parsed and rendered as if each row box had a “blank node” in front of it. Transparent, does not occupy any width or height, like a ghost, invisible, but does open the parent element.

<style>
span {
  display:inline-block
}
</style>

<div>
  <span></span>
</div>
Copy the code

Explanation for the ghost whitespace node: You can also think of a whitespace character of width 0 before the span element.

conclusion

In fact, for the front end, the market is common vertical center solution is enough to meet our needs, sometimes influenced by font factors and a slight gap is actually acceptable, as long as you understand how it works maybe you will not be so confused.

reference

CSS World by Zhang Xinxu