How to vertically align text in html and css
Set the display property of the span tag to inline-block to wrap multiple lines of text together. Set the div border of 1px solid black to see the alignment. In CSS select the div and give the height of 100px and set line-height to 100px. Write multiple lines of text inside that span with the help of br tag. Therefore we also have to use the line-height CSS property inside span to separate multiple-line text from one another.įor example, create a div and then a span inside the div.
#HOW TO VERTICALLY ALIGN TEXT IN HTML AND CSS CODE#
We will also use the display: inline-block CSS property for the span tag to wrap multiple lines of code together. Then we can use the line-height property for both div and span. We can use the br tag to break the line and make it a multiple-line text. We can place a span tag inside a div tag and put multiple lines inside the span tag. We can also align multiple numbers of lines vertically using the line-height property. Use span Inside a div Along With the line-height Property to Align Text Vertically in CSS 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.
Lastly, give the div a border of 1px solid black to see the vertical alignment. Give the div a height of 100px and line-height of 100px to vertically align the text to the center of the div. Write a one-line text Vertically aligned inside the div.
Let us give the div a class name of center. We can give line-height any value according to our requirement on where we want to align the text vertically.įor example, create a div and write a one-line text inside it. This technique will not work if the text has line breaks or is of more than one line. However, we can also use it to align our one-line text vertically. It is used to set the distance between lines of text. The line-height CSS property sets the height of a line box. If we have single-line text, we can use the line-height property to align the text vertically within a div. Use the line-height Property to Align Text Vertically in CSS We will introduce three methods of vertically aligning a text in CSS.
The text is successfully center-aligned(both vertically and horizontally) using flexbox. Moreover, we are also providing some height and border to it as well. Here, we are setting the display of the div container as flex and center aligning the content and items present inside the div container using justify-content and align-items properties provided by the flex-box CSS.