Проблема вертикального выравнивания текста элемента, который занимает две строки

Question

Я хочу выровнять текст в середине моего элемента, используя CSS.Это моя разметка:

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

И соответствующий 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;
}

Обычно, чтобы получить .quote в вертикальной середине #testimonial, я бы сделал:

.quote { line-height: 138px; }

Но это нарушает макет, потому что текст в .quote занимает более одной строки.

Как вы можете видеть, я пытался сделать vertical-align: middle;, и это тоже не работает.

Любая помощь приветствуется.Приветствия.

Answer 1

I недавно обнаружил , что вертикальное центрирование чего-то, что имеет неопределенные размеры, очень хорошо сочетается с vertical-align: middle; в сочетании с line-height: 0;.

Проверьте эту демонстрационную скрипку .

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

Вы можете сделать это проще с одним пролетом http://jsfiddle.net/7ebLd/

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

Answer 3

, поскольку никто еще не ответил на это с помощью решения для ячейки таблицы ..

здесь - с решением IE6 / 7 (хотя оно включает в себя хакерский взлом HTML), как @thirtydot говорит в комментариях, таблицаСвойства отображения не поддерживаются IE7 и ниже -

, если вы не хотите / не любите дополнительный элемент HTML, вы можете просто добавить IE7 и ниже некоторые верхние отступы для .quote - так, чтобы это нене может быть точно отцентрирован вертикально, это может быть приемлемым отступлением

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

Этот сайт предлагает множество вариантов для вертикального центрирования с помощью css .

Если вы можете установить высоту на .quote, я думаю, что метод 2 будет работать в этой ситуации:

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

Другим вариантом является использование метода display:table-cell; vertical-align:middle; в CSS, но этот параметр не работает в IE, поэтому вам придется также установить версию, специфичную для IE.

Answer 5

Этот сайт:

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

С результатом:

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

Использует следующую разметку / css для центрирования по вертикали нескольких строк с использованием метода display: table-cell, vertically-align: middle:

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