Is it possible to vertically center a SPAN within a DIV?

Question

Here's what I got:

<div class="slideshow">
    <span style="font-size:12px; color:#333333; font-family:Lucida Grande,Lucida Sans Unicode,Calibri,Arial,sans-serif;">Lorum ipsum delore sit amet. Lorum ipsum delore sit amet. Lorum ipsum delore sit amet. Lorum ipsum delore sit amet. Lorum ipsum delore sit amet. Lorum ipsum delore sit amet. Lorum ipsum delore sit amet. Lorum ipsum delore sit amet. Lorum ipsum delore sit amet. Lorum ipsum delore sit amet.</span>
    <span style="font-size:12px; color:#333333; font-family:Lucida Grande,Lucida Sans Unicode,Calibri,Arial,sans-serif;">Goodbye</span>
</div><br />

And the CSS:

/* slideshow */
.slideshow {
width:940px;
height:64px;
text-align:center;
background-image:url(../images/quotes.png);
position:relative;
}
.slideshow span {
display:block;
width:940px;
height:64px;
}

The <span>s are currently centered horizontally, but they should also be centered vertically. Is this possible?

The whole idea is to have testimonials on top the background image (quotes on the left and right side), but it doesn't quite look right without being centered both horizontally and vertically.

I'm sure I could somewhat get the desired effect using padding, but since each testimonial will be a different length I don't think that'd be a good approach.

Answer 1

yes it is possible.

Use the CSS attribute vertical-align:middle.

If you want to align verticaly below or above the horizontal center position then Use like this :

vertical-align:5;

or

vertical-align:-5;

Answer 2

Hi Matt, if you know that the content of your span will never exceed one line of text, just set

.slideshow span {
    line-height: 64px /* = the height of the containing div */
}

Or, if you know the height of the span:

.slideshow span {
    display: block;
    position: absolute;
    height: 64px;
    top: 50%;
    margin-top: -32px; /* = height/2 */
}

Last option would be to use a table formed by a single cell in place of the div, and use the vertical-align property.

Answer 3

CSS:

<style>
    div {
        width:300px; height:300px;
        text-align:center;
        display:table-cell; vertical-align:middle;
    }
</style>

HTML:

<div>
    <span>The Span</span>
</div>