Go CSS Vertical-align Properties Detailed author: Huangying Kun

• Preface: About the Vertical-align property.
• Practice is the real truth.
• Center vertically.
• The second usage.

• Message comments
• Back to Top

Preface: AboutVertical-align Property

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   <id=src="img1.jpg"/> <id="span" >span elements </ span> <id=src="img2.jpg"/></div>        

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

div{Border1PxSolidBlack/* Add a border to the parent element for easy identification */Width1000pxHeight200PX; font-size: 50px; /* Set the large font to compare */}imgwidth: 150PX;}  #span {display: inline-block; /* Note here the inline-block*/width:250PX; height:80PX; background-color: yellow; /* Set a background color for the span element to make it easy to identify */}imgwidth: 250PX;}            

Because the default value for Vertical-align is baseline, the above code is equivalent to #img1元素设置了vertical-align:baseline; properties.

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;,w3c The top value is interpreted by aligning the top of the element to 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;,w3c The text-top value is interpreted by aligning 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;,w3c is the interpretation of the middle value: 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;,w3c The bottom value is interpreted by aligning 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;,w3c 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:

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 to 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:%; add vertical-align:middle;

Add the element that needs to be centered vertically (#img1元素 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>   <id="span" ></span>   <id=src="Testimg1.jpg"/> </div>       

The current CSS should look like this:

div{  Width:+px;  Height:Center;} imgMiddle;} width:1Height:Middle;}            

The effect will look like this:

The second way to use

In fact,there is a second use of the Vertical-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.

Thanks for reading copyright©2016 Huangying kun

Go CSS vertical-align Property Details Ji Huangying kun