CSS vertical-align property

 The function of CSS vertical-align property can be used to design the vertical alignment of pictures in webpages. In the past, if pictures were inserted in the webpage content, the default effect may not be beautiful. Maybe the pictures and texts are difficult to align, web designers can Through the vertical-align of CSS, whether you want to align the image on the top, center, or bottom, you can do it, and the current new version of mainstream browsers support the effect of the vertical-align attribute.

In addition, some readers may mistakenly think that the vertical-align attribute is used to handle the vertical centering effect of general text. In fact, the purpose of vertical-align is to design the vertical alignment of pictures, not to design text alignment. If you For the solution to the vertical alignment of text, please refer to the introduction of " CSS Vertical Centering Techniques for Text ".

CSS vertical-align property syntax

vertical-align: parameter value;

The CSS vertical-align property has many parameter values ​​that can be used, but the majority is still based on upward alignment, vertical center alignment, and downward alignment. The top alignment is divided into the highest element of the line or the highest font of the line. Similarly, downward alignment is also divided into alignment according to the lowest element of the line or the lowest alignment of the font. The following are the parameters and syntax frequently used in vertical-align, which readers can refer to.

CSS vertical-align common parameter table

grammar	Description
vertical-align:baseline;	The default value is that the element is on the base line of the line, approximately in the middle of the text, which is not beautiful.
vertical-align:sub;	The picture is vertically aligned with the subscript position of the line of the text.
vertical-align:super;	The picture is vertically aligned with the superscript position of the line of text.
vertical-align:top;	The picture is vertically aligned with the highest position of the row element.
vertical-align:text-top;	The picture is vertically aligned to the highest position of the line of text.
vertical-align:middle;	The image is vertically aligned with the center position of the line of text.
vertical-align:bottom;	The picture is vertically aligned to the lowest position of the row of elements.
vertical-align:text-bottom;	The picture is vertically aligned to the lowest position of the line of text.
vertical-align:%;	Use a percentage to align the image vertically to the line of text, and it can have a negative value.

There is also an inherit attribute value, but the support of IE browser is not very good. The old version of IE does not support the inherit function, so it is recommended not to use it. With the actual effects of these parameter tables, the parameters can be applied in the example.

CSS vertical-align property example

<style type="text/css">
#TestImg1{
    vertical-align:text-top;
}
#TestImg2{
    vertical-align:middle;
}
#TestImg3{
    vertical-align:text-bottom;
}
#SeperationLine{
    height:1px ;
    border-top:1px #ccc dashed;
    margin:10px 0px;
}
</style>
This picture does not use the vertical-align attribute<img id="TestImg0" src="Image URL">This picture does not use vertical- align attribute
<div id="SeperationLine"></div>
This picture vertical-align is set to text-top<img id="TestImg1" src="Image URL">This picture vertical-align is set to text-top
<div id="SeperationLine"></div>
Set the vertical-align of this picture to middle<img id="TestImg2" src="Image URL">Set the vertical-align of this image to middle
<div id="SeperationLine"></div>
Set the vertical-align of this picture to bottom<img id="TestImg3" src="Image URL">Set the vertical-align of this picture to bottom

Example output effect

This picture does not use the vertical-align attribute This picture does not use the vertical-align attribute

This picture vertical-align is set to text-top this picture vertical-align is set to text-top

Set the vertical-align of this picture to middle and set the vertical-align of this picture to middle

Set the vertical-align of this picture to bottom and set the vertical-align of this picture to bottom

The example prepared a total of four different vertical-align effects. The first picture does not use the vertical-align attribute, so the position appears a bit floating, and the aesthetics is not very good. The second is to use text -top effect, the highest point of the picture is aligned with the highest point of the line of text, so the top of the line of text will be smoother, the third is to use the middle attribute value to make the picture vertically centered on the line of text, the fourth The lowest point of the picture is aligned with the lowest point of the row of elements.

The above is a practical example of the CSS vertical-align property. How to apply it on a web page to make the layout more beautiful depends on the flexible application skills of web designers.

The CSS vertical-align property can be used not only to control the vertical alignment effect of the picture, but also to design the vertical alignment effect of the text in the table field, so that the text is aligned vertically up or down, making the table look more Neatly, please refer to the introduction of " Top Alignment of Text in HTML Table Field " and " Bottom Alignment of Text in HTML Table Field ".