Как я могу использовать CSS для вертикального центрирования текста в привязке внутри LI?

Question

Вариации по этому вопросу задавались много раз. Вертикальное центрирование с помощью CSS является сложной задачей.

У меня есть определенный сценарий, связанный со списком, отображаемым горизонтально. Разметка выглядит так:

  <ul id='ul1' class='c'>
    <li><a href='javascript:void(0)'>Fribble Fromme</a></li>
    <li><a href='javascript:void(0)'>Fobble</a></li>
    <li><a href='javascript:void(0)'>Foo Fickle Pickle</a></li>
  </ul>

Стиль такой:

  ul.c {
    height:52px;
    text-align:center;
  }
  ul li a {
    float:left;
    text-decoration:none;
    border: 1px solid Maroon;
    padding:2px 12px;
    background:#FFEF8A;
    line-height:1em;
    width:100px;
  }
  ul li a:hover {
    background: #CCC;
  }
  ul li {
    height:52px;
    display:inline-block;
  }

Результирующий список выглядит так:

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

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

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

Как мне расположить его по центру, если на некоторых элементах A есть текст, который переносится?

Answer 1

Вы можете использовать display:table и т. Д. Вместе с vertical-align:middle

ul.c {
    text-align:center;
    display:table;
}

ul li {   
    float:left;    
}

ul li a {
    text-decoration:none;
    border: 1px solid Maroon;
    padding:2px 12px;
    background:#FFEF8A;
    width:100px;
    height:52px;
    display:table-cell;
    vertical-align:middle;
}

ul li a:hover {
    background: #CCC;
}

Пример: http://jsfiddle.net/kf52n/2/

Answer 2

Старый вопрос, но ответ теперь можно обновить с помощью Flexbox.

a {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

Answer 3

в CSS вы установили одинаковую высоту и высоту строки.Тогда вы получите прямоугольное поле.

Но все же вы видите пространство внизу, причина в заполнении

Добавление двух значений в заполнении добавляет верхнее и нижнее заполнение

padding: top bottom;

, так как это 2 и 12. Вы видите огромное пространство.

попробуйте это

height: 52px;
line-height:52px;
padding: 6px 6px; // here you have to tweak and see the output
vertical-align:center;

, дайте мне знать, что это работает

Answer 4

Я не мог придумать способ сделать это в CSS.Я обнаружил, что Я могу делать то, что мне нужно с Javascript, устанавливая padding-top и padding-bottom в соответствующие значения во время выполнения.Методика состоит в том, чтобы измерить «естественную» высоту элемента A, затем установить отступ так, чтобы элемент A был вертикально центрирован.

вот необходимый код js:

  function setHeightIntelligently(ulElement) {
    var items, L1, i, anchor, availableHeight = ulElement.clientHeight,
        naturalHeight, pad;
    items = ulElement.children;
    for(i=0, L1 = items.length;i<L1;i++){
      if (items[i].tagName.toUpperCase() == 'LI') {
        anchor = items[i].children[0]; 
        naturalHeight = anchor.clientHeight;
        pad = (availableHeight - naturalHeight)/2;
        anchor.style.paddingTop= pad+'px';
        anchor.style.paddingBottom= pad+'px';
      }
    }
  }

  function init() {
    var element = document.getElementById('ul1');
    setHeightIntelligently(element);
  }

В CSS нельзя явно устанавливать высоту или отступы для элементов A.Это привело бы к тому, что «естественная» высота не будет такой, как нам нужно.

Результат примерно такой:

Чтобы увидеть это в действии, иди сюда .