#Uncategorized

Center text vertically on single and multi-lined text

by admin 0

To make the text center in the middle no matter how much content is inside of it.

1. Convert the parent element to table.

2. Convert the text element to table cell and vertically align it middle.

 

Source code     
<style type="text/css">
 
.parent{
	display: table;
}
 
.child{
	display: table-cell;
	vertical-align: middle;
}
 
</style>
 
<div class="parent">
    <div class="child">
        <p>Vertically centered text</p>
    </div>
</div>