How to Align Text Vertically in CSS
-
Use the
line-height
Property to Align Text Vertically in CSS -
Use
span
Inside adiv
Along With theline-height
Property to Align Text Vertically in CSS -
Use
flexbox
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;
}