Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”

This article also participated in the “Digitalstar Project” to win a creative gift package and creative incentive money

Problem Description:

[root@localhost] [root@localhost] [root@localhost] [root@localhost] [root@localhost] [root@localhost] [root@localhost] [root@localhost] [root@localhost]

` < body > ` ` ` ` < P > visit record x < / P > ` ` < / body > ` ` < style > ` ` ` ` P {` ` the font - size: 16 px; ` ` ``line-height: 16px; ` ` ``}` ` ` ` ``p:before {` ` ``content: ``''``; ` ` ``width: 5px; ` ` ``height: 16px; ` ` ``display: inline-block; ` ` ``background: red` ` ``}` `</style>`Copy the code

vertical-align

1. Scope of action:

  • The Inline elements
  • The inline – block element
  • Table – cell elements
  • Float,position: Absolute The display value of the absolute element is ignored, forcing it to be treated as a block, so vertical-align loses its effect

Value of 2.

  • Baseline (the default)
  • Top: Aligned with the top of the highest element in the row, usually the top of the parent element
  • bottom
  • Middle (approximately the middle part of the letter X)
  • text-top
  • super
  • sub
  • Numerical percentage, such as 4px; 50% (a positive value indicates an upward shift from the baseline and a negative value indicates a downward shift from the baseline. 2. The percentage is calculated based on line-height.
  • inherit
  • initial
  • unset

3. Vertical-align basis

(1) Inline elements

span {` ` ``font-size: 50px; ` ` ``line-height: 100px; ` ` ` ` `}Copy the code

Display :inline the outer edge of an inline element is aligned with the top and bottom edges of its line height, which can be less than the height of the font. The baseline position changes as the line height and font size change.

(2) Inline-block baseline

The baseline of an inline-block is the baseline of the last line box in a normal stream, but if the line box has no inline boxes in it or its overflow property is not visible, then the baseline is the edge of the margin bottom.

Add the inline boxes

` < div > ` ` ` ` here is a div, contains text, the independent ` ` ` ` < span > span tag < / span > ` ` ` ` < / em > < em > em label, ` ` ` ` and other text. ` `</div>`Copy the code

“1” left and right inline-blocks have normal streams inline boxes

`<body>` ` ``<div ``class``=``"left"``>aBqxmmxxhu</div>` ` ``<div ``class``=``"right"``>cghijknbvx</div>` `</body> ` `<style>` ` ``div {` ` ``display: inline-block; ` ` ``width: 100px; ` ` ``height: 100px; ` ` ``border: 1px solid red; ` ` ``} ` ` ``.right {` ` ``margin-bottom: 50px` `}`Copy the code

Both have inline-boxes with default baseline alignment

The left inline-block of 2 has normal streaming text, and the right box has no text

`<body>` ` ``<div ``class``=``"left"``>aBqxmmxxhu</div>` ` ``<div ``class``=``"right"``></div>` `</body>` `<style>` ` ``div {` ` ``display: inline-block; ` ` ``width: 100px; ` ` ``height: 100px; ` ` ``border: 1px solid red; ` ` ``}` ` ` ` ``.right {` ` ``margin-bottom: 50px` ` ``}`Copy the code

The left inline-block box is normal flow, and the baseline of the box is the baseline of the text

The right inline-block box has no content, and the baseline of the box is the bottom edge,margin-bottom position

The default alignment of inline-blocks is baseline alignment

==> Set the alignment mode vertical-align:top

==> Set the alignment mode vertical-align:bottom

The second box has margin-bottom, so it’s rendered like this

3 has abnormal flow text on the left and no text on the right

`<body>` ` ``<div ``class``=``"left"``>aBqxmmxxhu</div>` ` ``<div ``class``=``"right"``></div>` `</body>` `<style>` ` ``div {` ` ``display: inline-block; ` ` ``width: 100px; ` ` ``height: 100px; ` ` ``border: 1px solid red; ` ` ``}` ` ` ` ``.left {` ` ``overflow: hidden` ` ``}` ` ` ` ``.right {` ` ``margin-bottom: 50px` ` ``}`Copy the code

There is text on the left, but it is overflow:hidden, the baseline is the bottom edge, and there is no text on the right, but there is margin-bottom, showing the baseline alignment

3. Frequently Asked Questions

(1) There are gaps in the picture

`<body>` ` ``<div>` ` ``<img src=``"cat.png"``>` ` ``</div>` `</body>` `<style>` ` ``div {` ` ``width: 200px; ` ` ``border: 1px solid red; ` ` ``}` ` ``img {` ` ``width: 100px; ` ` ``height: 100px; ` ` ``}` `</style>`Copy the code

Under HTML5 document declarations, inline elements inside a block element behave as if there were one (or more likely two) empty nodes inside the block element that are invisible, have no width, and have no entities, similar to text nodes with entities

`<body>` ` ``<div>` ` ``<img src=``"cat.png"``>` ` ``<span>x</span>` ` ``</div>` `</body>` `<style>` ` ``div {` ` ``width: 200px; ` `border: 1px solid red; ` ` ``font-size: 16px; ` ` ``line-height: 32px` ` ``}` ` ` ` ``img {` ` ``width: 100px; ` ` ``height: 100px; ` ` ``}` ` ` ` ``span {` ` ``display: inline-block; ` ` ``background: green; ` ` ``}` `</style>`Copy the code

The height of an inline-block text is the height of line-height

The default image is aligned with the parent element’s baseline (that is, the bottom edge of the letter X)

Solution:

  • Damage vertical-align Operating condition: picture display:block
  • Baseline alignment: vertical-align:top/bottom/middle
  • Change the value of line-height:5px/0px(inside the outer box)

(2) the vertical center is incomplete

`<body>` ` ``<div>` ` ``<img src=``"cat.png"``>` ` ``<span>xxxxx</span>` ` ``</div>` `</body>` `<style>` ` ``div {` ` ``width: 200px; ` ` ``height: 200px; ` ` ``border: 1px solid red; ` ` ``}` ` ` ` ``img {` ` ``width: 100px; ` ` ``height: 100px; ` `vertical-align: middle; ` ` ``}` ` ` ` ``span {` ` ``display: inline-block; ` ` ``background: green; ` ` ``}` `</style>`Copy the code

Vertical center: When middle is set, it means that the center line is aligned. At this point, it is aligned 1/2x from the base line of the parent element, approximately the middle position of x. At this point, it is set to line-height:200px