Problem vertically aligning 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 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.

possible duplicate of [How to align text vertically ?](http://stackoverflow.com/questions/2826681/how-to-align-text-vertically) — Ry-, May 30 '11 at 19:29
No, `line-height` doesn't work in this case because my text is more than one line. — Josh, May 30 '11 at 19:30
@minitech: That's not a good duplicate. The accepted answer is using `line-height`, which is no good for multiple lines. The `display: table-cell` answer is there, but it has no explanation and no upvotes. — thirtydot, May 30 '11 at 19:31
The "easiest" way is to use/mimic a table (either in markup or in CSS using table-cell) and then set to display valign="middle". But it's dirty. Oh so dirty. — Jared Farrish, May 30 '11 at 19:31
@thirtydot: You're right - but there are lots to choose from. Let me find another. — Ry-, May 30 '11 at 19:32
A decent example: http://www.emblematiq.com/blog/vertical_align_with_css/ See the multiple line middle example. — Jared Farrish, May 30 '11 at 19:33
`display: table-cell; vertical-align: middle;` works, if you add your comment as an answer I'll accept it :) — Josh, May 30 '11 at 19:35
@Josh: Are you talking to me? I'll add it as answer if you like (who doesn't like free rep?), but note that it doesn't work in in IE7: http://caniuse.com/#search=table — thirtydot, May 30 '11 at 19:41

score 16 · Answer 1 · edited May 23 '17 at 12:09

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;
}

In case you could not make it work in IE, try to use simple html5 doctype, like . I found that it's not working in IE by using ugly XTHML doctype. — Adam C., Feb 17 '14 at 21:58

score 4 · Answer 2 · answered Sep 01 '13 at 04:47

4

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;
}

answered Sep 01 '13 at 04:47

polkila

51
2

score 2 · Answer 3 · edited Jun 03 '11 at 23:00

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>

score 1 · Answer 4 · edited Jun 03 '11 at 06:10

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.

score 0 · Answer 5 · edited Jun 03 '11 at 06:15

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%;
}

Result

Problem vertically aligning text of an element that spans two lines

5 Answers5

Linked