CSS vertical-align property

In CSS, the vertical-align property is used to control the vertical alignment of elements. This property is usually used in inline elements or table cells to align elements vertically relative to their parent element or other elements.

value

vertical-alignThe attribute can accept some of the following values:

baseline: Aligns the element’s baseline with the parent element’s baseline.
sub: Offsets the element downward from the baseline by a specified distance, typically used for subscripts.
super: Offsets the element upward from the baseline by a specified distance, typically used for superscripts.
top: Aligns the element’s top with the parent element’s top.
text-top: Aligns the element’s top with the parent element’s font top.
middle: Vertically centers the element.
bottom: Aligns the element’s bottom with the parent element’s bottom.
text-bottom: Aligns the element’s bottom with the parent element’s font bottom.
<length>: Uses a specific length value for the offset.
<percentage>: Uses a percentage for the offset.
inherit: Inherits the parent element’s vertical-align value.

Example Code

Let’s use some example code to demonstrate the specific effects of the vertical-align property.

Example 1: Baseline Alignment

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<title>Vertical Align Baseline</title> 
<style> 
.box { 
display: inline-block; 
border: 1px solid black; 
font-size: 20px; 
} 

.baseline { 
vertical-align: baseline; 
} 
</style> 
</head> 
<body> 
<div class="box baseline">Baseline</div> 
<div class="box">Baseline</div> 
</body> 
</html>

In the example above, we create two inline-block elements, one of which has the vertical-align: baseline; property set. As you can see, the element with vertical-align: baseline; set is aligned with the baseline of the parent element, while the default alignment of the other element is vertical center.

Example 2: Superscript and subscript

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<title>Vertical Align Superscript and Subscript</title> 
<style> 
.sup { 
font-size: 20px; 
vertical-align: super; 
} 

.sub { 
font-size: 20px; 
vertical-align: sub; 
} 
</style> 
</head> 
<body> 
<span>2</span><span class="sup">x</span><sup>2</sup> + <span>3</span><span class="sub">y</span><sub>2</sub> 
</body> 
</html>

In this example, we use the vertical-align: super; and vertical-align: sub; properties to create superscript and subscript effects, offsetting the element upward and downward by a certain distance, respectively, to make it look like a superscript or subscript.

Example 3: Vertically centered alignment

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<title>Vertical Align Middle</title> 
<style> 
.container { 
display: table; 
height: 200px; 
width: 200px; 
} 

.box { 
display: table-cell; 
vertical-align: middle; 
text-align: center; 
} 
</style> 
</head> 
<body> 
<div class="container"> 
<div class="box">Vertically Centered</div> </div>

</body>

</html>

In this example, we achieve vertical center alignment by setting display: table; on the parent element and display: table-cell; on the child element, along with vertical-align: middle;.

Summary

The vertical-align property is a commonly used property in web page layout, controlling the vertical alignment of elements. By using the vertical-align property appropriately, we can achieve a variety of effects, such as baseline alignment, superscript and subscript alignment, and vertical centering. In actual development, you can choose the appropriate vertical-align value based on your specific needs to achieve the desired layout effect.