How to align text vertically with CSS

In this article we will learn the easiest way to align text vertically in your HTML project, using only CSS quickly.

What’s up programmer, how are you? Let’s learn something new

Aligning texts horizontally is pretty easy, we just need to add the text-align rule with center

But what about vertically? The text-align rule doesn’t work the same

So let’s see an example to see in practice how to do this alignment:

<div id="container">
 <p id="text">Some text here</p>
</div>

Here we have our div with container id, which contains the text to be centered

And the text is in a <p> tag, which is a very common practice

Now let’s go to the CSS to center vertically:

body {
 margin: 30px;
}

#container {
 width: 500px;
 height: 500px;
 border: 1px solid red;
}

#text {
 position: relative;
 text-align: center;
 line-height: 500px;
}

With this code we can align the text in the center, check out the result:

Let’s explain the code, first we settle a margin in the body, just to detach the ends of the <div> from the browser, it is not necessary

Then we dimension the container, which will probably happen in your case too, it has a height and width

Then the magic is in the #text, we insert relative position, to follow the parent and a line height (line-height) equal to the height of the parent, this makes it centered

And also the text-align with center, as said before to align horizontally