arrange text to the center of a container div (single or multiline) [ 1106 views ]
Goal: show text in a div like in a table cell
<style>
.centercenter{
text-align: center;
display: table;
}
.centercenter p{
display: table-cell;
vertical-align: middle;
}
</style>
<div class="centercenter">
<p>I'm on the center<br>of my parent</p>
</div>
That’s all. Add some additional styles to the container (size, decoration) and…
I’m on the center
of my parent
Here is a small extra: center a div in a div. The old technik play with the margins.
.divtocenter_container{
position: relative;
}
.divtocenter{
position: absolute;
width: 300px;
height: 80px;
left: 50%;
top: 50%;
margin-left: -150px; /* -width/2 */
margin-top: -40px; /* -height/2 */
}
Sunday, June 1st, 2014 at 10:21.
Filed under web trick
.
