Vertical-align and line-height in css; verticalalign

Vertical-align and line-height in css; verticalalign
Vertical-align and line-height usage in css 1. First, let's look at a phenomenon:

(1) place an image into a div block, and set the background color of the div block to aquamarine. You will find that there is a gap between the image and the bottom edge of the div block.

Instance:

The Code is as follows:

<! DOCTYPE html> (2) Add a span label to the image of the div block with the content xxxx !, You will find that the elements in the span tag are aligned with the image on the bottom line. When you add a background to the span tag, you can see that the bottom of the image is aligned with the bottom of the letter x.

Instance:

　　　　　　

Example: You can see it clearly after enlarging it!

　　　　　　

The Code is as follows:

<! DOCTYPE html> Why does this happen?

A: The reason is that the line elements are affected by vertical-align (vertical align) and line-height (line height) by default, while vertical-align uses baseline by default, baseline alignment. This baseline is the bottom edge of the letter X in the span tag, so the bottom of the image is aligned with the bottom of the letter (not aligned with the background of the span tag ). Because the letter itself has a line-height (line height) value, the background of the span tag is higher than that of the letter.

Solution: (either of the four methods can solve the problem)

(1) Set font-size in the entire div to 0;

(2) Change the image img to a block-level element, that is, set it to display: block;

(3) set a line height (smaller value) for the div and line-height: 5px;

(4) set the vertical align (vertical-align) of the img image. The top, middle, and bottom values can all be used (to overwrite the default baseline value );

The effect is as follows:

　　　　

The complete code is as follows:

<! DOCTYPE html> Add the following attributes and attribute values to div and img to vertically center the image in the div block.

<style type="text/css">...div{    line-height: 500px;    font-size: 0px;}img{    vertical-align: middle;}...<style>

The effect is as follows:

The Code is as follows:

<! DOCTYPE html> Source: http://www.zhangxinxu.com/wordpress/2015/08/css-deep-understand-vertical-align-and-line-height/