Center Text Vertically Within

This:

<!DOCTYPE html>
<style>
  .outer { outline: 1px solid #eee; }
  .outer > p { display: table-cell; height: 200px; vertical-align: middle; }
</style>

<div class="outer">
  <p>This text will be vertically aligned</p>
</div>

<div class="outer">
  <p>This longer text will be vertically aligned. Assumenda quinoa cupidatat messenger bag tofu. Commodo sustainable raw denim, lo-fi keytar brunch high life nisi labore 3 wolf moon readymade eiusmod viral. Exercitation velit ex, brooklyn farm-to-table in hoodie id aliquip. Keytar skateboard synth blog minim sed. Nisi do wes anderson seitan, banksy sartorial +1 cliche. Iphone scenester tumblr consequat keffiyeh you probably haven't heard of them, sartorial qui hoodie. Leggings labore cillum freegan put a bird on it tempor duis.</p>
</div>

works in modern browsers, regardless of whether text spans only one or multiple lines.

Also updated the fiddle at http://jsfiddle.net/74Rnq/135/ Not sure what you were doing with a 625px margin on the left when the thing itself was only 150px in width… Tidied things up a bit by removing the inline styling and using a bit of padding as well.

Leave a Comment

Hata!: SQLSTATE[HY000] [1045] Access denied for user 'divattrend_liink'@'localhost' (using password: YES)