If you want to align your text to be centered inside the box from both side (horizontally and vertically) you can do this very easily, this below example will helps you.
Html:
<div class="contentbox">
<p>This is the text to be centralized</p>
</div>
CSS:
.contentbox{
width: 200px;
height: 100px;
border: 1px solid #111;
margin: 0 auto;
border-radius: 5px;
display: table; /* element will be displayed as an inline-level table */
}
.contentbox p{
text-align: center; /* elements will be displayed as horizontally center */
vertical-align: middle; /* elements will be displayed as vertically middle */
display: table-cell; /* let the element behave like a <td> element */
}
According to above code:
-
Height and width is not mandatory, I have provided the height and width to show you the output as because by default it will take 100% height and width hence you can define the height and width of box according to the height and width of your requirement .
-
Margin: 0 auto; -: Here auto means box will horizontally placed in center and 0 means it will take margin 0 from top and bottom.
-
Display:table; The element will be displayed as an inline-level table.
-
Text-align:center; The elements will be displayed as horizontally center.
-
vertical-align:middle; The elements will be displayed as vertically middle.
Display:table-cell; It will let the element behave like a <td> element.
The output of above code will be:
0 Comment(s)