A vertical – the align attribute

  • Vertical-align affects the vertical position of inline elements in a row box
  • Consider: does a div have height when it has no height set?
    • No content, no height
    • There is content, content holds up height
  • But what is the nature of the content holding up height?
    • The content has line-height, which extends the height of the div
  • Why does the line height support the height of div?
    • This is because ==line boxes == exist, and line-boxes have a feature that wraps the inline level of each row
    • The text has a line height, and the whole line height must be wrapped to wrap the line-level
  • So, consider further:
    • What if the div has an image, text, inline-block, or even a margin attribute?

2. The line boxesDifferent case analysis

2.1 Case 1: How do Line boxes wrap contents when there are only words? (Note: red is the wrapped div, same as below)

2.2 Case 2: How do Line-boxes wrap contents when there are pictures and text?

2.3 Case three: How to wrap contents with Pictures, Text and Inline-block (larger than picture)?

2.4 Case 4: There is an image, there is text, there is inline-block and there is a margin-bottom, how to wrap the content?

2.5 Case 4: If there is an image, text, inline-block (larger than the image) and margin-bottom and text, how to wrap the content?

Understand baseline alignment

3.1 Inline Element Alignment (Inline-block with no content)

3.2 Inline Element Alignment (Inline-block has content)

3.3 Alignment of two inline block-level elements (inline-block has no content)

3.4 Alignment of two inline block-level elements (inline-block has content)

3.5 Alignment of two inline block-level elements (inline-block has no content, but has a gap below the base line in the parent box)

4. Baseline alignment

  • Conclusion: Line-boxes must somehow wrap all the contents of the current row.
  • But, but why all the weird alignment?
    • What you think is strange and strange, actually has its internal law
    • The answer is baseline alignment
  • The official vertical-align default value is baseline
  • But who is baseline?
    • The baseline of the text is below the letter X
    • The default baseline of inline-block is margin-bottom.
    • When inline-block has text, baseline is below x of the last line of text
  • It all makes sense

Five.Vertical – align – Different values

  1. Now, it’s very easy to understand the different values
  • Baseline (default) : Baseline alignment (you need to understand what baseline is first)
  • Top: Align the top of the inline boxes with the top of the line boxes
  • Middle: The center point of the inline box is aligned with the parent box baseline plus half of the x-height line
  • Bottom: Align the bottom of the inline box with the bottom of the line box
  • : Raise or lower the line level box by a certain distance (distance calculated relative to line-height \ element height), 0% means same as baseline
  • : Raise or lower the line level box some distance, 0cm means same as baseline

  1. Can you explain the first phenomenon?

Six. The picture is centered

6.1 The height of the parent box is uncertain, picture vertical-align:middle

<style> .box { background-color: pink; } i{ width: 100px; height: 100px; background-color: red; display: inline-block; } img{ vertical-align: middle; } </style> <body> <div class="box"> <img src=".. /img/ysx.jpg" alt="" width="100"> <span>spanxxx</span> <! -- <i></i> --> </div> </body>Copy the code

6.2 The height of the parent box is determined, picture vertical-align:middle

6.3 The height of the parent box is uncertain and there are other inline-blocks in it

6.4 Position and Transform Truly center the image

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta  name="viewport" content="width=device-width, < span style> < span style>. Box-sizing: border-box; color: RGB (50, 50, 50); height: 300px; /* line-height: 300px; */ } i { width: 100px; height: 100px; background-color: red; display: inline-block; } img { /* vertical-align: middle; */ position: relative; top: 50%; left: 0; transform:translate(0,-50%) } </style> <body> <div class="box"> <img src=".. /img/ysx.jpg" alt="" width="100"> <span>spanxxx</span> <! -- <i>inline-block</i> --> </div> </body> </html>Copy the code