Выровнять текст по вертикали в элементе блока - PullRequest
43 голосов
/ 02 марта 2011

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

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

li a {
    width: 300px;
    height: 100px;
    margin: auto 0;
    display: block;
    background: red;
}
<ul>
    <li><a href="">I would like this text centered vertically</a></li>
</ul>

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

Спасибо!

Ответы [ 8 ]

78 голосов
/ 02 марта 2011

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

enter image description here

Это все, что вынеобходимо сделать

display: flex;
align-items: center;

Соображения по поводу поддержки браузера

Chrome

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

Firefox

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

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

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

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

IE

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

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

47 голосов
/ 23 февраля 2012

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

a {
  height:100px;
  line-height:100px;
}
12 голосов
/ 04 апреля 2014
li a {
width: 300px;
height: 100px;
display: table-cell;
vertical-align: middle;
margin: auto 0;
background: red;

}

4 голосов
/ 18 июня 2013

Вы можете попробовать отображение: inline-block и: after.Как это:

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

Пожалуйста, просмотрите демо .

2 голосов
/ 02 марта 2011

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

li {
    background: red;
    text-align:center;
}
li a {
    padding: 4em 0;
    display: block;
}
1 голос
/ 25 ноября 2018

Вы также можете использовать inline-table рядом с table-cell, если хотите центрировать свои элементы по вертикали и горизонтали.Ниже приведен пример использования этих свойств экрана для создания меню:

.menu {
  background-color: lightgrey;
  height: 30px; /* calc(16px + 12px * 2) */
}

.menu-container {
  margin: 0px;
  padding: 0px;
  padding-left: 10px;
  padding-right: 10px;
  height: 100%;
}

.menu-item {
  list-style-type: none;
  display: inline-table;
  height: 100%;
}

.menu-item a {
  display: table-cell;
  vertical-align: middle;
  padding-left: 2px;
  padding-right: 2px;
  text-decoration: none;
  color: initial;
}

.text-upper {
  text-transform: uppercase;
}

.text-bold {
  font-weight: bold;
}
<header>
  <nav class="menu">
    <ul class="menu-container">
      <li class="menu-item text-upper text-bold"><a href="javascript:;">StackOverflow</a></li>
      <li class="menu-item"><a href="javascript:;">Getting started</a></li>
      <li class="menu-item"><a href="javascript:;">Tags</a></li>
    </ul>
  </nav>
</header>

Работает, устанавливая display: inline-table; для всех <li>, а затем применяя display: table-cell; и vertical-align: middle; к дочерним элементам <a>.Это дает нам возможность тега <table> без его использования.

Это решение полезно, если вы не знаете высоту вашего элемента.

Совместимость очень хорошая (относительно caniuse.com ), с Internet Explorer> = 8.

1 голос
/ 13 июня 2012

Вот общее решение, использующее только 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 равным высоте.Предупреждение: вам нужно указать значение line-height: normal для содержащегося <span>, иначе оно будет наследоваться от содержащего элемента.

0 голосов
/ 01 октября 2016

с благодарностью Влада за ответ за вдохновение;протестировано и работает на 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
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...