Interpret the vertical-align attribute in css

Syntax:

vertical-align : baseline |sub | super |top |text-top |middle |bottom |text-bottom |length

Parameters:
baseline: Align the content of the object that supports the valign feature to the baseline
sub: The subscript of vertically aligned text
super: Vertical Align the superscript of the text
top: Align the content of the object that supports the valign feature to the top of the object
text-top: Align the text of the object that supports the valign feature to the top of the object
middle: Will support the valign feature Align the content of the object to the middle of the object
bottom: Align the text of the object that supports the valign feature to the bottom of the object
text-bottom: Align the text of the object that supports the valign feature to the top of the object
length: CSS2: A length value consisting of a floating point number and a unit identifier | or a percentage. Can be negative. Defines the offset from the baseline. The baseline is 0 for numeric values ​​and 0% for percentages. Currently IE5 does not support it. See length unit

Description:

Sets or retrieves the vertical alignment of the object's content.
The corresponding script feature is verticalAlign. Please see other books I have written.

Example:

td { vertical-align : center; }

css Why does adding vertical-align: middle to span not work?

vertical-align will only work on elements with certain display styles (such as cell display mode: table-cell). Therefore, to achieve vertical center alignment up and down, you can use the following style

display:table-cell;      /*按照单元格的样式显示元素*/
vertical-align:middle;   /*垂直居中对齐*/

Compared with setting the line-height attribute, the above setting method is compatible with situations where text has multiple lines.

The following is an example:

Create Html element

<div>
    <span>测试测试，即便是多行，我也还是垂直居中对齐的。</span>
</div>

Set css style

div{ width:200px; height:115px; border:4px solid #ebcbbe; display:table-cell;vertical-align: middle;

vertical-align: top ;What does it mean

vertical-align This is to set the vertical arrangement of elements.
It is used to define the vertical alignment of the baseline of an inline element relative to the baseline of the row where the element is located.
It There are many values: baseline | sub | super | top | text-top | middle | bottom | text-bottom | inherit
For example, top is the top of the vertically aligned text.
In the table, this attribute setting unit Alignment of grid content. Vertical-align is most commonly used in td to control internal objects position.
The effect of this attribute is different in each browser, so use it with caution

The above is the detailed content of Interpret the vertical-align attribute in css. For more information, please follow other related articles on the PHP Chinese website!