CSS Vertical-align Properties in a detailed

Preface: Aboutvertical-alignProperty

The vertical-align property may be one of the more difficult to understand CSS properties.

The explanation for this is that the property defines the vertical alignment of the baseline of the element within the row relative to the baseline of the row where the element is located.

This paper will demonstrate its function through a series of practical experiments.

[Note: Place the mouse over the picture on this article to see the guides]

Practice is the truth

First, define an HTML structure for the experiment in the HTML body

It contains a div as a parent element, two pictures, and a span element, as follows:

<div>   Writing   <imgid="img1"src="Img1.jpg" />   <spanid="span">span element </span>   < img id="Img2"src="img2.jpg" /></div>

To be easier to compare, you need to add some simple styles as follows:

Div{Border:1px Solid Black;/ * Add a border to the parent element for easy identification * /  width: +px;Height: $px;font-size: -px;/ * Set large font for easy comparison * /}img#img1{width: Maxpx;}#span{Display:Inline-block;/ * Note the inline-block*/here  width: -px;Height: thepx;Background-color:Yellow;/ * Set a background color for the span element for easy identification * /}img#img2{width: -px;}

Because the default value for vertical-align is baseline, the above code is equivalent to setting the vertical-align for the #img1 element : Baseline; Property.

The world's interpretation of the baseline value is: by default, the element is placed on the baseline of the parent element.

The current effect is probably this (the black border is the parent Div Range):

The second property value is vertical-align:top;the top value is interpreted as the top of the element is aligned with the top of the highest element in the row.

In this example, the highest element is Picture 2 (#img2), as follows:

The third attribute value is vertical-align:text-top;the text-top value is interpreted as: aligns the top of the element with the top of the parent element's font. is as follows:

The fourth attribute value is vertical-align:Middle;the middle value is interpreted as: place this element in the middle of the parent element.

In fact, it can be seen that the alignment is the middle of the parent element text:

The fifth attribute value is vertical-align:bottom;the bottom value is interpreted as: Aligns the top of the element to the top of the lowest element in the row.

In this case, the lowest element in the row is the span element, as follows:

The sixth attribute value is vertical-align:text-bottom;the text-bottom value is interpreted as: Aligns the bottom of the element with the bottom of the parent element's font. is as follows:

You can use a fixed length to represent the distance from the bottom of the element to the parent element baseline (baseline), such as vertical-align:px;

Positive values indicate upward, and negative values indicate downward, as shown below:

You can also use percentages to indicate the percentage of the bottom of the element relative to the parent element baseline (baseline) move relative to the parent element height (height), such as vertical-align: + %;

Similarly, positive values indicate upward, and negative values indicate downward, as shown below:

Not only can you apply the vertical-align attribute to a picture, but you can also apply it to other inline (inline) elements

In this case, put vertical-align:top; Apply on the span element as follows:

Center vertically

As you can see from the example above, thevertical-align property has a number of possible values

We can use its middle value to construct an effect that allows an indeterminate inline (inline) element to center vertically in the parent element.

Just add an empty span element outside the element that needs to be centered

Display the span element :inline-block; Width:1px; height:%; and add vertical-align:Middle;

Add the element that needs to be centered vertically ( #img1 element in this example) vertical-align:Middle;

To center the element horizontally, you can set the text-align in its parent element (in this case, the div element) :Center;

The current HTML structure might look like this:

<div>   <spanid="span"></span>   <  IMGID="img1"src="testimg1.jpg" /></div>

The current CSS should look like this:

Div {  width:+px;  height:px;  text-align Center;} img #img1 {  vertical-alignMiddle;} #span {  displayinline-block;   width:1px;  height:%;  vertical-align Middle;}

The effect will look like this:

The second way to use

In fact, there is a second use of thevertical-align property

vertical-align can be used in display:table-cell; Below the element (typically TD), there are four desirable values Baseline|top|middle|bottom such as

This usage is relatively simple and is not to be further expanded here.

CSS Vertical-align Properties in a detailed