CSS text vertical alignment

CSS Text Vertical Alignment

In web design, text vertical alignment is very important, as it can affect the overall aesthetics and readability of the page. In CSS, we can use a number of properties to achieve different vertical alignments, centering text vertically within an element or aligning it with other elements. This article will detail common CSS properties and techniques to help you achieve different vertical alignment effects.

line-height Property

The line-height property controls the height of a line of text. By setting different values, you can adjust the vertical alignment of text. In CSS, the default value for line-height is normal, which sets the line height based on the element’s font properties. If you need to adjust the vertical alignment of text, you can set the line-height property with a specific value.

p { line-height: 1.5; /* Sets the line height to 1.5 */ 
}

Setting the line-height value can create different vertical alignment effects by varying the spacing above and below the text. If you need to vertically center text, you can use the line-height property to set the line height equal to the element height.

div {
height: 100px;
line-height: 100px; /* Vertically center text */ 
}

vertical-align property

Vertical-align is a property used to control the vertical alignment of text or line boxes within an element. This property is commonly used in table-cell or inline elements to vertically align text with other elements.

span {
vertical-align: middle; /* Sets the text to be vertically centered */
}

In the table-cell element, the vertical-align property controls the vertical alignment of elements within the cell. For example, we can align text with the bottom of the cell:

td {
vertical-align: bottom; /* Sets the text to be vertically aligned with the bottom of the cell */
}

Flex Layout

In modern CSS layout, flex layout has become a common way to achieve page layout and element alignment. With flex layout, we can easily achieve vertical alignment of text.

.container {
display: flex;
align-items: center; /* Sets the vertical center alignment of the element */
}

By setting the align-items property to center, we can vertically center the elements within the flex container. This method is suitable for various text alignment needs and is a quick and easy method.

Practical Application

Below, we’ll use a simple example to demonstrate how to achieve vertical text alignment using CSS.