Vertical-align: middle vertical center,

Vertical-align: middle vertical center,

In the past, we always thought that vertical-align and text-align are the same principle. One is vertical center, and the other is horizontal center. The result is not effective at all. In fact, vertical-align is totally different from text-align. vertical-align cannot be used like this.

The vertical-align attribute sets the vertical alignment of elements. This attribute defines the vertical alignment between the baseline of an element in a row and the baseline of the row where the element is located. The negative length value and percentage value can be specified. This reduces the number of elements rather than increases. In table cells, this attribute sets the cell content alignment in the cell box. Default Value: baseline. The element is placed on the baseline of the parent element.

First, let's look at the following sentence: "In the table cell, this attribute sets the alignment of the cell content in the cell box ." This is easy to understand. If you add a vertical-align: middle style to the td of a table, the content in the table is vertically centered. Similarly, if you give a vertical-align: bottom is aligned at the bottom. If a vertical-align: top is given, it is aligned at the top.
The second usage defines the vertical alignment of the baseline of the element in the row to the baseline of the row where the element is located. Assume that the elements a and B in two rows are div, And a and B are both div. When a adds a vertical-align: middle style, the bottom of B (baseline) the center position of a is aligned, for example:

If both a and B have a vertical-align: middle style, they are aligned with each other in the middle, that is, the midline alignment in the vertical direction, for example:

Now I want to vertically center the div of class = "box" in the div of class = "wrapper". I can add an empty div label in the div of class = "wrapper, set its height to 100%, its width to 0, and a vertical-align: middle style. Similarly, a vertical-align is given to the div of class = "box: in the middle style, the box can be vertically centered in the div.

 1 <style> 2     .wrapper { 3         width: 200px; 4         height: 200px; 5         background-color: green; 6  7         margin: 0 auto;         8         text-align: center; 9     }10 11     .help {12         width: 0;13         height: 200px;14 15         display: inline-block;16         vertical-align: middle;17 18     }19     .content {20         width: 100px;21         height: 100px;22         background-color: yellow;23 24         vertical-align: middle;25         display: inline-block;26 27     }28     29 </style>30 

 
 
Next, let's take a look at a picture to better understand the representation of the main attribute values of vertical alignment.