The problem of vertical alignment of the text of an element that spans two lines

Question

I want to align some text in the middle of my element using CSS. This is my markup:

<div id="testimonial"> <span class="quote">Some random text that spans two lines</span> </div> 

And the corresponding CSS:

 #testimonial { background: url('images/testimonial.png') no-repeat; width: 898px; height: 138px; margin: 0 auto; margin-top: 10px; text-align: center; padding: 0px 30px 0px 30px; } .quote { font-size: 32px; font-family: "Times New Roman", Verdanna, Arial, sans-serif; vertical-align: middle; font-style: italic; color: #676767; text-shadow: 1px 1px #e7e7e7; } 

Usually, to get .quote in the vertical middle of #testimonial , I would do:

 .quote { line-height: 138px; } 

But this breaks the layout because the text in .quote spans more than one line.

As you can see, I tried to do vertical-align: middle; , and that doesn't work either.

Any help is appreciated. Greetings.

Answer 1

I recently found out that the vertical centering of something measuring undefined goes very well with vertical-align: middle; in combination with line-height: 0; .

Check out the demo script .

HTML:

 <div id="testimonial"> <span><span class="quote">Some random text<br />that spans two lines</span></span> </div> 

CSS

 #testimonial { background: #333 url('images/testimonial.png') no-repeat; width: 898px; height: 138px; margin: 0 auto; margin-top: 10px; text-align: center; padding: 0 30px 0 30px; line-height: 138px; } #testimonial>span { display: inline-block; line-height: 0; vertical-align: middle; } .quote { font-size: 32px; font-family: "Times New Roman", Verdanna, Arial, sans-serif; font-style: italic; color: #676767; text-shadow: 1px 1px #e7e7e7; line-height: 32px; } 

Answer 2

so far no one has answered this with a table cell solution.

here you go - with IE6 / 7 solution too (although this is due to the HTML code hacker), since @thirtydot says in the comments, table display properties are not supported by IE7 and below -

if you don't want / as an additional HTML element, you can just give IE7 and below some top fill on .quote - so that although it would not be exactly centered vertically, this might be an acceptable reduction

CSS

 #testimonial { background: #eee url('images/testimonial.png') no-repeat; width: 898px; height: 138px; margin: 10px auto 0; padding: 0 30px; display: table-cell; vertical-align: middle; text-align: center; } .quote { font-size: 32px; font-family: "Times New Roman", Verdana, Arial, sans-serif; font-style: italic; color: #676767; text-shadow: 1px 1px #e7e7e7; } 

IE CSS:

 <!--[if lte IE 7]> <style type="text/css" media="screen"> #testimonial i { display: inline-block; height: 100%; vertical-align: middle; } .quote { display: inline-block; width: 100%; vertical-align: middle; } </style> <![endif]--> 

HTML:

 <div id="testimonial"> <i></i> <span class="quote">Some random text <br> that spans two lines</span> </div> 

Answer 3

You can make it easier with a single span http://jsfiddle.net/7ebLd/

 #testimonial { height: 138px; line-height: 138px; } span { display: inline-block; line-height: 19px; vertical-align: middle; } 

Answer 4

This website offers many options for vertical centering with css .

If you can set the height on .quote , I think method 2 will work in this situation:

 .quote { position:absolute; top:50%; height:240px; margin-top:-120px; /* negative half of the height */ } 

Another option is to use the display:table-cell; vertical-align:middle; method display:table-cell; vertical-align:middle; display:table-cell; vertical-align:middle; in CSS, but this option doesn’t work in IE, so you will also need to install an IE dependent version.

Answer 5

This site:

http://www.emblematiq.com/blog/vertical_align_with_css/

As a result:

http://www.emblematiq.com/blog/vertical_align_with_css/assets/03.html

Uses the following / css markup to center vertically multiple lines using the display: table-cell , vertically-align: middle method:

 <div id="wrapper"> <img src="0.gif" alt="stuff" id="fixed" /> <div id="floating"><div><div> <p>Middle aligned text goes right here and it does wrap nicely at the end of the line</p> </div></div></div> </div> 

 p { margin:0; padding:0; } #wrapper { width:550px; border:1px solid #666; padding:10px; height:300px; } #fixed { float:right; width:200px; height:300px; background:#666; display:block; } #wrapper>#floating { /*display:table for Mozilla & Opera*/ display:table; position:static; } #floating { /*for IE*/ width:300px; height:100%; background:#EAEAEA; position:relative; } #floating div { /*for IE*/ position:absolute; top:50%; } #floating>div { /*for Mozilla and Opera*/ display:table-cell; vertical-align:middle; position:static; } #floating div div { position:relative; top:-50%; }