How to use align-items on the Container In CSS
Using align-items on the container aligns flex items along the cross-axis (vertically for a row-direction container). By setting align-items: center, you ensure all child elements of the flex container are vertically centered, making it a simple and effective alignment method.
Syntax:
align-items: center;
Example: In this example vertically center text within a flex container using align-items: center. The container has a height of 200px and a border for visualization.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vertical Align Text Inside Flexbox</title>
<style>
.flex-container {
display: flex;
align-items: center;
height: 200px;
border: 1px solid #000;
}
</style>
</head>
<body>
<div class="flex-container">
<p>Vertically Centered Text</p>
</div>
</body>
</html>
Output:
vertically align text inside a flexbox using CSS Example Output
How to vertically align text inside a flexbox using CSS?
To vertically align text inside a flexbox means positioning the text centrally within the vertical space of a flex container. This is done using CSS properties such as `align-items` and `justify-content` to control the vertical alignment and centering of the text.
Here we have some common approaches:
Table of Content
- Using align-items on the Container
- Using align-self on the Item
Contact Us