How to vertically align text inside a flexbox using CSS?
Last Updated :
24 Jun, 2024
Vertically aligning text inside a flexbox involves positioning the text centrally within the vertical space of a flex container. This can be achieved 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:
Using align-items on the Container
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.
HTML
<!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
Using align-self on the Item
Using align-self on a flex item allows individual items to override the align-items property set on the container. By applying align-self: center to a specific item, you can vertically center that item within the flex container independently of other items.
Syntax:
align-self: center;
Example: The example utilizes a flex container with display: flex, and the .flex-item class centers the item vertically with align-self: center. The specified height and border aid in visualizing the container.
HTML
<!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;
height: 200px;
border: 1px solid #000;
}
.flex-item {
align-self: center;
}
</style>
</head>
<body>
<div class="flex-container">
<p class="flex-item">Vertically Centered Text</p>
</div>
</body>
</html>
Output:
vertically align text inside a flexbox using CSS Example OutputUsing flexbox for vertical alignment of text inside a container is both efficient and straightforward. By leveraging properties such as align-items and align-self, you can easily center text vertically within a flex container. These methods not only simplify your CSS but also ensure your designs are responsive and visually appealing.
Similar Reads
How to Vertically Align Text Next to an Image using CSS ? Adding images into our websites is a common practice, and there are situations where text must be vertically aligned alongside an image. For example, a user’s name should appear immediately next to their profile picture, vertically aligned for optimal readability . In this article, we will see how t
2 min read
How to Vertically Align Text Within a Div in CSS? Aligning text vertically within a div can enhance the visual appeal of your web design. There are various approaches to achieving vertical alignment using CSS.1. Using line-height PropertyThe line-height property is the easiest and most commonly used approach to align text within a div vertically. T
2 min read
How to Align One Item to the Right using CSS Flexbox ? Methods to Align a Single Item to the Right using CSS Flexbox:1. Using margin-left: autoApplying margin-left: auto to the specific flex item pushes it to the right, utilizing the available space.HTML<html> <head> <style> .flex-container { display: flex; background-color: #f0f0f0; p
3 min read
How to Vertically Align an Image Inside a Div in CSS ? In this article, we are going to see how we can vertically align an image inside a div. Centering content both vertically and horizontally is one of the most important functions which needs to be done.Below are the approaches to vertically align an image inside a div in CSS: Â Table of ContentUsing C
4 min read
How to vertically and horizontally align flexbox to center ? As we already know, flexbox is a model and not just a CSS property.The below image shows a box with two axis, one is Main Axis (i.e. horizontal axis) and Cross Axis (i.e. vertical axis). And for aligning a flexbox in the centre, both horizontally and vertically, we are going to need to work on both
2 min read
How to align div vertical across full screen in Tailwind CSS ? You can easily align div vertical across the full screen using flex property in Tailwind CSS. Tailwind uses justify-center and items-center property which is an alternative to the flex-property in CSS.Syntax:<div class="flex h-screen justify-center items-center"> . . . </div>flex propert
2 min read