it-swarm.com.ru

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

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

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>, но я действительно не хочу добавлять больше разметки, чем эта.

Спасибо!

37
user623520

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

enter image description here

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

display: flex;
align-items: center;

Вопросы поддержки браузера

Chrome

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

Fire Fox

Установите для layout.css.flexbox.enabled значение true.

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

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

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

Т.Е.

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

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

71
melhosseiny

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

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

}

12
Vlad

Вы можете попробовать отображение: 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;
}

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

4
Airen

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

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

Вот общее решение, использующее только 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>

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

1
Steve11235

Вы также можете использовать 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.

0
Anwar

с благодарностью Влада ответ за вдохновение; протестировано и работает на 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

0
RozzA