Вертикальный текст выравнивания в блочном элементе

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

HTML:

<ul>
    <li><a href="">I would like this text centered vertically</a></li>
</ul>

CSS

li a {
    width: 300px;
    height: 100px;
    margin: auto 0;
    display: block;
    background: red;
}

Нет ли для этого свойства CSS3? Я бы хотел добавить <span>, но я действительно не хочу добавлять больше разметки, чем это.

Спасибо!

Ответ 1

В соответствии с CSS Flexible Box Layout Module вы можете объявить элемент a как контейнер flex (см. рисунок) и используйте align-items для вертикального выравнивания текста вдоль поперечной оси (которая перпендикулярна главной оси ).

Это все, что вам нужно сделать, это

display: flex;
align-items: center;

Рекомендации по поддержке браузера

Хром

display: -webkit-flex;
-webkit-align-items: center;

Firefox

Установите layout.css.flexbox.enabled в true.

В качестве альтернативы вы можете использовать

display: -moz-box;
-moz-box-align: center;

Просто знайте, что это не css3-flexbox и что оно не будет завершено.

Может ли кто-нибудь проверить синтаксис IE и добавить его сюда? Вы можете попробовать синтаксис Расширенный кросс-браузер flexbox.

Смотрите fiddle (не забудьте установить layout.css.flexbox.enabled в true, если вы находитесь на FF.)

Ответ 2

Вы также можете попробовать

a {
  height:100px;
  line-height:100px;
}

Ответ 3

li a {
width: 300px;
height: 100px;
display: table-cell;
vertical-align: middle;
margin: auto 0;
background: red;

}

Ответ 4

Вы можете попробовать дисплей: встроенный блок и: after.Like:

HTML

<ul>
    <li><a href="">I would like this text centered vertically</a></li>
</ul>

CSS

li a {
    width: 300px;
    height: 100px;
    margin: auto 0;
    display: inline-block;
    vertical-align: middle;
    background: red;  
}
li a:after {
  content:"";
  display: inline-block;
  width: 1px solid transparent;
  height: 100%;
  vertical-align: middle;
}

Просматривайте демонстрацию .

Ответ 5

Будет ли использование прокладки в порядке для ваших нужд?: http://jsfiddle.net/sm8jy/:

li {
    background: red;
    text-align:center;
}
li a {
    padding: 4em 0;
    display: block;
}

Ответ 6

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
</head>
<body>
    <ul>
        <li>
            line one
        </li>
        <li>
            <span style="display: inline-block; vertical-align: middle">line two dot one
                <br />
                line two dot two</span>
        </li>
        <li>
            line three
        </li>
    </ul>
    <div style="height: 200px; line-height: 200px; border-style: solid;">
            <span style="display: inline-block; vertical-align: middle; line-height: normal;">line two dot one
                <br />
                line two dot two</span>
    </div>
</body>
</html>

Как я понимаю, вертикальное выравнивание применяется только к элементам встроенного блока, например, <img>. Вы должны изменить атрибут отображения элемента на встроенный блок, чтобы он работал. В этом примере высота линии расширяется, чтобы соответствовать диапазону. Если вы хотите использовать содержащий элемент, например <div>, установите атрибут line-height таким же, как высота. Предупреждение, вам нужно будет указать строку-высоту: normal на содержащейся <span>, или она наследует от содержащего элемента.

Ответ 7

с благодарностью Vlad ответить за вдохновение; тестирование и работа над IE11, FF49, Opera40, Chrome53

li > a {
  height: 100px;
  width: 300px;
  display: table-cell;
  text-align: center; /* H align */
  vertical-align: middle;
}

центры во всех направлениях приятно даже с переносом текста, разрывами строк, изображениями и т.д.

Я получил фантазию и сделал фрагмент

li > a {
  height: 100px;
  width: 300px;
  display: table-cell;
  /*H align*/
  text-align: center;
  /*V align*/
  vertical-align: middle;
}
a.thin {
  width: 40px;
}
a.break {
  /*force text wrap, otherwise `width` is treated as `min-width` when encountering a long word*/
  word-break: break-all;
}
/*more css so you can see this easier*/

li {
  display: inline-block;
}
li > a {
  padding: 10px;
  margin: 30px;
  background: aliceblue;
}
li > a:hover {
  padding: 10px;
  margin: 30px;
  background: aqua;
}

<li><a href="">My menu item</a>
</li>
<li><a href="">My menu <br> break item</a>
</li>
<li><a href="">My menu item that is really long and unweildly</a>
</li>
<li><a href="" class="thin">Good<br>Menu<br>Item</a>
</li>
<li><a href="" class="thin">Fantastically Menu Item</a>
</li>
<li><a href="" class="thin break">Fantastically Menu Item</a>
</li>
<br>
note: if using "break-all" need to also use "&lt;br>" or suffer the consequences