Yet 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