• Margin: 0 auto; margin: 0 auto;
  • Text-align: center; text-align: center;

But we’ve never talked about vertically centered properties.

Vertical-align, which applies only to inline elements or inline blocks,

vertical-align : baseline |top |middle |bottom 
Copy the code

Sets or retrieves the vertical alignment of the object’s contents.

  • Note:

    Vertical-align does not affect content alignment within block-level elements, it only applies to inline elements or inline blocks,

    Inline block elements, in particular, are often used to control the alignment of images/forms with text.

1. Align images, forms and text

So we know that we can use vertical-align to control the vertical relationship between images and text. The default image is aligned with the text baseline.

2. Remove the gaps at the bottom of the picture

  • The reason:

    The bottom line of an inline block element, such as an image or form, is aligned with the base line of the parent box.

    There is a gap at the bottom of the image.

  • The solution is:

    • To img vertical – align: middle | top | bottom, and so on. Keep the image out of line with the baseline.

    • Add display: block to img; Converting to block-level elements is no problem.