How to Align Text Vertically in CSS

Rajeev Baniya Feb 02, 2024
  1. Use the line-height Property to Align Text Vertically in CSS
  2. Use span Inside a div Along With the line-height Property to Align Text Vertically in CSS
  3. Use flexbox to Align Text Vertically in CSS
How to Align Text Vertically in CSS

We will introduce three methods of vertically aligning a text in CSS.

Use the line-height Property to Align Text Vertically in CSS

If we have single-line text, we can use the line-height property to align the text vertically within a div. The line-height CSS property sets the height of a line box. It is used to set the distance between lines of text. However, we can also use it to align our one-line text vertically. This technique will not work if the text has line breaks or is of more than one line. We can give line-height any value according to our requirement on where we want to align the text vertically.

For example, create a div and write a one-line text inside it. Let us give the div a class name of center. Write a one-line text Vertically aligned inside the div. Give the div a height of 100px and line-height of 100px to vertically align the text to the center of the div. Lastly, give the div a border of 1px solid black to see the vertical alignment.

The example below shows that the text is aligned vertically to the center of the div containing height of 100 px and border of 1px solid black using CSS line-height property.

Example Code:

<div class="center"> Vertically aligned </div>
.center {
    height : 100px;
    line-height : 100px;
    border : 1px solid black;
}

Use span Inside a div Along With the line-height Property to Align Text Vertically in CSS

We can also align multiple numbers of lines vertically using the line-height property. We can place a span tag inside a div tag and put multiple lines inside the span tag. We can use the br tag to break the line and make it a multiple-line text. Then we can use the line-height property for both div and span. We will also use the display: inline-block CSS property for the span tag to wrap multiple lines of code together. Therefore we also have to use the line-height CSS property inside span to separate multiple-line text from one another.

For example, create a div and then a span inside the div. Write multiple lines of text inside that span with the help of br tag. In CSS select the div and give the height of 100px and set line-height to 100px. Set the div border of 1px solid black to see the alignment. Set the display property of the span tag to inline-block to wrap multiple lines of text together. Give line-height to 20px to the span to give a gap between multiple lines of text. Keep the vertical-align to middle to vertically place the text exactly in the middle.

The example below shows the vertical alignment of multiple lines of text within a div with the help of line-height and display: inline-block property.

Example Code:

<div> 
    <span>
        Multiple <br> line <br> code
    </span>
</div>
div{
    height : 100px;
    line-height: 100px;
    border : 1px solid black
}
span {
    display : inline-block;
    vertical-align : middle;
    line-height : 20px;
}

Use flexbox to Align Text Vertically in CSS

We can also use flexbox to align a text within a div vertically or horizontally. We can use flexbox by setting the display property to flex. After setting the display property to flex, we can use align-items property and put its value as center to align a text vertically within a div. We can use the justify-content property and set it to center to center the text within a div horizontally. Flexboxes are very easy to use, and they are very effective as well.

For example, create a div and write single or multiple lines of text inside it. Use the br tag to make multiple lines of text. Give a height of 100px to the div. Set the border as 1px solid black to see the alignment. Put the value of the display property as flex to use flexbox. Then, set the align-items to center to align the text vertically within the div to the center. We can also align the text horizontally by putting the value of justify-content to center.

Thus, we can use flexbox to align the text horizontally and vertically in CSS.

Example Code:

<div>
    Align <br> Text to <br> Center
<div>
div {
    height : 100px;
    border : 1px solid black;
    display : flex;
    align-items : center;
    justify-content : center;
}

Related Article - CSS Alignment