Jourdein

I code, I experienced, I blog and I share my enthusiasm

RSS
people

Centering text vertically and horizontally

Vertical-Align.pngYet again, I faced this difficulty when centering text vertically. I’ve done this before but I’ve forgotten. Was hoping to find new way but landed on the same page I was referring before.

By Gavin Kistner, Understanding vertical-align, or “How (Not) To Vertically Center Content”

This is the code I used:
div.outer {height:100%;text-align:center;}
div.inner {position:absolute;top:40%;left:40%;height:36px;width:200px;}
<div class="outer">
<div class="inner">
<span class="title">Title</span>
<small>Caption</small>
</div>
</div>

I modified the code to fit my need. I wanted to center the content with the width of the viewing/browser width. I think, finding the correct percentage need trials. It depend on the width of the container. You could calculate though, mathematically.

Leave a Reply