Problem vertically aligning text of an element that spans two lines - html

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 relevant 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'd 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've tried doing vertical-align: middle; and that doesn't work either.
Any help is appreciated. Cheers.

Answer 1

I recently found out that vertical centering of something which has undefined dimensions goes very well with vertical-align: middle; in combination with line-height: 0;.
Check out this demonstration fiddle.
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

You can do it simpler with single span
http://jsfiddle.net/7ebLd/
#testimonial {
height: 138px;
line-height: 138px;
}
span {
display: inline-block;
line-height: 19px;
vertical-align: middle;
}

Answer 3

as nobody's answered it with the table cell solution yet..
here you go - with an an IE6/7 solution too (though it involves a yukky HTML hack) as #thirtydot says in comments, table display properties are not supported by IE7 and below -
if you don't want/like the extra HTML element, you could just give IE7 and below some top padding on the .quote - so that while it wouldn't be vertically centered accurately it may be an acceptable fall back
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 4

This website offers a plethora of options for vertical centering with css.
If you can set a height on .quote, I think Method 2 would work in this situation:
.quote {
position:absolute;
top:50%;
height:240px;
margin-top:-120px; /* negative half of the height */
}
Another option is to use display:table-cell; vertical-align:middle; method in CSS, but this option does not work in IE, so you'll have to also set an IE-specific version.

Answer 5

This site:
http://www.emblematiq.com/blog/vertical_align_with_css/
With the result:
http://www.emblematiq.com/blog/vertical_align_with_css/assets/03.html
Uses the following markup/css 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%;
}