Want to center text ? Today I will be showing you various techniques for centering text in HTML. We will not only learn to center things horizontally but also center things vertically.
So these are our the various techniques that we will be learning for centering your text horizontally and vertically.
- Centering Text
- Horizontally Center Text
- Using Text-Align
- Using The <center> tag
- Vertically Center Text
- Using Line-height
- Using Vertically-Align
- For Bootstrap 4 Users
- Horizontally Center Text
Table Of Contents
Sometimes centering text is really important to give your website design a great look. Here is how you can do it –
Horizontally Center Text
Horizontally centering text is very very easy !!
It’s really simple to do this you just need to use a CSS property called text-align and set it to center.
<p style="text-align:center;"> Some text to center </p>
if you are using a good CSS framework like bootstrap then it can also be done by adding a class to your element. You just need to add the text-center class to your element.
<p class="text-center" > Some text to center </p>
Really simple to center text using the using the <center> tag. Just wrap your text wiith the center tag and your text will get centered.
<center> <p> This will get centered </p> </center>
NOTE : The <center> tag is deprecated and is not recommended to be used
Vertically Center Text
Many of you might already be knowing how to center text horizontally but might be curious to know how to center text vertically.
There are various methods to center text vertically, we will have a look at them one by one.
This is probably the most common and the simplest way to it. You need to set line-height to the height of the parent container.
<div style="height:60px;" > <p style="line-height:60px;"> vertically centered text </p> </div>
This can be used only when you want to center a single line of text but if you want to vertically center multiple lines of text then you need to use the vertical-align method
Using Vertical Align
This is the best method to vertically center text. This will vertically center your text no matter how short or long your text is.
Over here you need to add CSS properties to the container of your text. Set vertical-align to middle and display to table-cell.
<div style="display:table-cell;vertical-align:middle;"> <p> this text will get vertically center </p> </div>
For Bootstrap 4 Users
Recently I told you about bootstrap 4 carousel and now we are again talking about bootstrap 4. I think it is getting popular day by day.
It’s really simple to do this with bootstrap, just add a class align-middle to the element.
You may Read more about bootstrap 4 vertical alignment over here.
I hope you may have learned how to center text in html. In Case if you didn’t get anything or you have any doubts related to centering text don’t hesitate to ask me in the comments section below.
And if you liked the post dont forget to share it with your other web developer friends.