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

Popular posts from this blog

c++ - Linked List error when inserting for the last time -

java - activate/deactivate sonar maven plugin by profile? -

java - What is the difference between String. and String.this. ? -