CSS текст вертикального вирівнювання всередині li

Я показую кількість полів у рядку з висотою та шириною виправлення, згенерованими з <li> тегів. тепер мені потрібно вирівняти текст у вертикальному центрі. Вертикальне вирівнювання CSS не впливає, можливо, я щось пропускаю ???

Я не шукаю хитрощів із використанням (поле, запас, висота рядка), вони не працюватимуть, оскільки деякий текст довгий і розірветься на два рядки.

Будь ласка, знайдіть фактичний код:

CSS-код

ul.catBlock{
  width:960px; 
  height: 270px; 
  border:1px solid #ccc; 
}

ul.catBlock li{
  list-style: none; 
  float:left; 
  display:block; 
  text-align: center; 
  width:160px; 
  height: 100px;
}

ul.catBlock li a{ 
  display: block;  
  padding: 30px 10px 5px 10px; 
  height:60px;
}

HTML-код

<ul class="catBlock">
 <li><a href="#">IP Phone</a></li>
 <li><a href="#">Dual SIM Switch Server</a></li>
 <li><a href="#">IP PBX</a></li>
</ul>

Визначте батьківський з display: tableі сам елемент з vertical-align: middleі display: table-cell.

line-heightце те, як ви вертикально вирівнюєте текст. Це досить стандартно, і я не вважаю це "злом". Просто додайте line-height: 100pxдо свого, ul.catBlock liі це буде добре.

У цьому випадку вам, можливо, доведеться додати його ul.catBlock li aзамість цього, оскільки весь текст всередині також liзнаходиться всередині a. Я бачив, як ви робите це дивні речі, тому спробуйте і те, і інше.

Однак на багато років запізнення ця реакція може бути, кожен, хто стикається з цим, може просто захотіти спробувати

li {
    display: flex;
    flex-direction: row;
    align-items: center;
}

Підтримка браузера для flexbox набагато краща, ніж була, коли @scottjoudry опублікував свою відповідь вище, але ви все одно можете розглянути питання про префіксацію чи інші параметри, якщо ви намагаєтесь підтримувати набагато старіші браузери. канюза: флекс

Дивно (або ні), vertical-alignінструмент насправді найкраще справляється з цією роботою. Найкраще, що Javascript не потрібен.

У наступному прикладі я розміщую outerклас посередині тіла, а innerклас - посеред outerкласу.

Попередній перегляд: http://jsfiddle.net/tLkSV/513/

HTML:

<div id="container">
    <span></span><div class="outer">
        <span></span><div class="inner">

        </div>
    </div>
</div>

CSS:

html, body {
    height: 100%;
    margin: 0;
    padding: 0; }
#container {
    text-align: center;
    height: 100%; }
span { 
    height: 100%;
    vertical-align: middle;
    display: inline-block; }
.outer {
    width: 100px;
    height: 200px;
    padding: 0;
    border: 1px solid #000;
    vertical-align: middle;
    display: inline-block; }
.inner {
    background: red;
    width: 30px;
    height: 20px;    
    vertical-align: middle;
    display: inline-block; }

Вертикальне вирівнювання працює шляхом вирівнювання центрів елементів, які знаходяться поруч. Застосування вертикального вирівнювання до одного елемента абсолютно нічого не робить. Якщо ви додасте другий елемент, який не має ширини, але є висотою контейнера, ваш єдиний елемент переміститься у вертикальний центр за допомогою цього елемента без ширини, таким чином вертикально центрируючи його. Єдині вимоги полягають у тому, щоб ви встановили обидва елементи в рядку (або вбудований блок) та встановили їх атрибут вертикального вирівнювання vertical-align: middle.

Примітка. Ви можете помітити в моєму коді нижче, що мій <span>тег і <div>тег торкаються. Оскільки вони обидва вбудовані елементи, простір фактично додасть пробіл між елементом без ширини та вашим подільником, тому не забудьте залишити його.

В майбутньому цю проблему вирішить флексбокс. Зараз підтримка веб-переглядача є недостатнім, але вона підтримується в тій чи іншій формі у всіх поточних браузерах.

Підтримка браузера: http://caniuse.com/flexbox

.vertically_aligned {

    /* older webkit */
    display: -webkit-box;
    -webkit-box-align: center;
    -webkit-justify-content: center;

    /* older firefox */
    display: -moz-box;
    -moz-box-align: center;
    -moz-box-pack: center;

    /* IE10*/
    display: -ms-flexbox;
    -ms-flex-align: center;
    -ms-flex-pack: center;

    /* newer webkit */
    display: -webkit-flex;
    -webkit-align-items: center;
    -webkit-box-pack: center;

    /* Standard Form - IE 11+, FF 22+, Chrome 29+, Opera 17+ */
    display: flex;
    align-items: center;
    justify-content: center;
}

Фон на Flexbox: http://css-tricks.com/snippets/css/a-guide-to-flexbox/

Тут немає жодних ідеальних відповідей, за винятком відповіді Асафа, яка не містить ні коду, ні прикладу, тому я хотів би зробити свій внесок ...

Для того, щоб зробити vertical-align: middle;роботу, ви повинні використовувати display: table;для свого ulелемента та display: table-cell;для liелементів, а потім, ніж ви можете використовувати його vertical-align: middle;для liелементів.

Вам не потрібно вказувати явні дані margins, paddingsщоб зробити текст вертикально посередині.

Демо

ul.catBlock{
    display: table;
    width:960px; 
    height: 270px; 
    border:1px solid #ccc; 
}

ul.catBlock li {
    list-style: none;
    display: table-cell; 
    text-align: center; 
    width:160px; 
    vertical-align: middle;
}

ul.catBlock li a { 
    display: block;
}

Як пояснено тут: https://css-tricks.com/centering-in-the-unknown/ .

Як перевірено в реальній практиці, найнадійнішим, але витонченим рішенням є введення в <li />елемент первинного елемента в якості допоміжного вбудованого елемента , висота якого повинна бути встановлена ​​на 100% (зріст батька, розмір <li />), а його vertical-alignвстановлено в середину . Для цього ви можете поставити a <span />, але найзручніший спосіб - це використовувати li:afterпсевдоклас.

Знімок екрана:

ul.menu-horizontal {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: inline-block;
    vertical-align: middle;
}

ul.menu-horizontal:after {
    content: '';
    clear: both;
    float: none;
    display: block;
}

ul.menu-horizontal li {
    padding: 5px 10px;
    box-sizing: border-box;
    height: 100%;
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;
    float: left;
}

/* The magic happens here! */
ul.menu-horizontal li:before {
    content: '';
    display: inline;
    height: 100%;
    vertical-align: middle;
}

Спробуйте це рішення

Найкраще працює у більшості випадків

Ви , можливо , доведеться використовувати DIV замість літій для цього

.DivParent {
    height: 100px;
    border: 1px solid lime;
    white-space: nowrap;
}
.verticallyAlignedDiv {
    display: inline-block;
    vertical-align: middle;
    white-space: normal;
}
.DivHelper {
    display: inline-block;
    vertical-align: middle;
    height:100%;
}

<div class="DivParent">
    <div class="verticallyAlignedDiv">
        <p>Isnt it good!</p>
     
    </div><div class="DivHelper"></div>
</div>

Просте рішення для вертикальної вирівнювання середньої ... для мене це працює як шарм

ul{display:table; text-align:center; margin:0 auto;}
li{display:inline-block; text-align:center;}
li.items_inside_li{display:inline-block; vertical-align:middle;}