Можно ли вертикально центрировать SPAN в DIV?

Question

Вот что я получил:

<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 />

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

<span> в настоящее время центрированы по горизонтали, но они также должны быть центрированы по вертикали. Возможно ли это?

Вся идея заключается в том, чтобы на фоне фонового изображения располагались отзывы (кавычки слева и справа), но оно выглядит не совсем правильно, если не центрировать его по горизонтали и по вертикали .

Я уверен, что смог бы добиться желаемого эффекта, используя padding, но, поскольку каждый отзыв будет иметь разную длину, я не думаю, что это будет хорошим подходом.

Answer 1

, если вы знаете, что содержание вашего диапазона никогда не будет превышать одну строку текста, просто установите

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

Или, если вы знаете высоту пролета:

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

Последний вариант - использовать таблицу, образованную одной ячейкой, вместо div и использовать свойство вертикального выравнивания.

Answer 2

CSS:

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

HTML:

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

Answer 3

да, это возможно.

Используйте атрибут CSS vertical-align:middle.

Если вы хотите выровнять по вертикали ниже или выше горизонтального центрального положения, используйте следующее:

vertical-align:5;

или

vertical-align:-5;