css - Make display: table-cell elements stack on top of each other? -
i'm building tumblr template. in tumblr, there variable called {content}
, may contain 1 or more <p>
-tags
<p>foo</p> <p>bar</p>
i'm trying center content vertically inside div, regardless of size of text or number of paragraphs.
i used display: table-cell techinque described here: http://css-tricks.com/vertically-center-multi-lined-text/
in short, add
display: table;
to containing object and
display: table-cell; vertical-align: middle;
to object want vertically center.
this works great when have 1 p-tag. multiple don't flow vertically, rather horizontally. there can this?
sample: http://jsfiddle.net/dbpf2/1/
i think need containing object around <p>
tags set display:table-cell, rather setting display:table-cell <p>
tags themselves.
<div class="content"> <div class="inner"> <p>foo</p> <p>bar</p> </div> </div> .content {display:table;} .inner {display:table-cell; vertical-align:middle;}
Comments
Post a Comment