Как центрировать вертикально многострочный div?

-1

Я хочу центрировать вертикально эти линии. Я попробовал метод line-height, но линии не регулируются на держателе .item.Как центрировать вертикально многострочный div?

У меня есть этот HTML:

<li><a href="#" class="item"> 
    <span>Line 1</span><br> 
    <span>Line 2</span><br> 
    <span>Line 3</span> 
    </a> 
</li>

И CSS:

.item { 
    text-align: center; 
    display: block; 
    height: 125px; 
    padding: 10px 0; 
    border-radius: 2px; 
    margin-bottom: 10px; 
    color: #fff; 
}

источник

2014-09-10 User New

Вертикально центр в чем? – 2014-09-10 14:05:48

Внутри этого держателя с классом .item. –

'vertical-align: text-bottom;' будет вашей спасительной грацией здесь, так как буквы типа p и q, которые висят ниже 'baseline', собираются сбросить ваше кажущееся центрирование. Итак, выровняйте все до дна, а затем добавьте дополнение для соответствия. Это приведет к отключению размера шрифта, поэтому для этого потребуется некоторое тестирование и настройка. Здесь есть несколько вещей, которые можно попробовать здесь: https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align и смещать верхнюю часть с заполнением. – briansol

Вы можете использовать один и тот же обивка на вершине, как на дне, таким образом текст в элементе будет " центрированный "по вертикали. Как это:

.item { 
    text-align: center; 
    display: block; 
    padding: 60px 0px; 
    border-radius: 2px; 
    margin-bottom: 10px; 
    color: #fff; 
}

Другим способом является использование высоту строки, но это работает только тогда, когда есть одна строка текста.

Кроме того, отметьте this.

источник

2014-09-10 14:06:51 JasonK

Отлично, вы решили мою проблему. благодаря –

Как центрировать вертикально многострочный div?

ответ

Смежные вопросы