Home > Article > Web Front-end > What does vertical-align mean? how to use ?
What does vertical-align mean? how to use ?
- 不言Original
- 2019-04-12 14:29:519282browse
vertical-align is a property in CSS that can be used to set the vertical alignment of elements. Let’s take a closer look at the usage of the vertical-align property.
The vertical-align attribute defines the vertical alignment of the baseline of an inline element relative to the baseline of the line in which the element resides. Allows specifying negative length values and percentage values. This lowers the element instead of raising it. In table cells, this property sets the alignment of the cell contents in the cell box.
The vertical-align attribute has many values:
baseline: default. The element is placed on the parent element's baseline.
sub: Vertically aligned text subscript.
super: Vertically align the superscript of the text
top: Align the top of the element with the top of the highest element in the row
text-top: Align the top of the element with the top of the parent Top alignment of element font
middle: Place this element in the middle of the parent element.
bottom: Align the top of the element with the top of the lowest element in the row.
text-bottom: Align the bottom of the element with the bottom of the font of the parent element.
length:
%: Use the percentage value of the "line-height" attribute to arrange this element. Negative values are allowed.
inherit: Specifies that the value of the vertical-align attribute should be inherited from the parent element.
For example: vertical-align top is to vertically align the top of the text.
In the table, this attribute sets the alignment of the cell content. Vertical-align is most commonly used in td to control the position of internal objects.
Let’s take a look at a specific example:
<html>
<head>
<style type="text/css">
img.top {vertical-align:text-top}
img.bottom {vertical-align:text-bottom}
</style>
</head>
<body>
<p>
这是一幅<img class="top" border="0" src="/i/eg_cute.gif" / alt="What does vertical-align mean? how to use ?" >位于段落中的图像。
</p>
<p>
这是一幅<img class="bottom" border="0" src="/i/eg_cute.gif" / alt="What does vertical-align mean? how to use ?" >位于段落中的图像。
</p>
</body>
</html>The running effect is as follows:
This article It’s all over here. For more exciting content, you can pay attention to the CSS Video Tutorial column on the PHP Chinese website! ! !
The above is the detailed content of What does vertical-align mean? how to use ?. For more information, please follow other related articles on the PHP Chinese website!