CSS вертикальный текст выравнивания внутри li

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

Я не ищу трюки с использованием (margin, padding, line-height), это не сработает, потому что какой-то текст длинный и разбивается на две строки.

Пожалуйста, найдите фактический код:

код 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>

Ответы

Ответ 1

Определите родителя с display: table и самим элементом с vertical-align: middle и display: table-cell.

Ответ 2

line-height - это то, как вы вертикально выравниваете текст. Это довольно стандартный, и я не считаю это "взломом". Просто добавьте line-height: 100px к вашему ul.catBlock li, и все будет хорошо.

В этом случае вам, возможно, придется добавить его в ul.catBlock li a, потому что весь текст внутри li также находится внутри a. Я видел некоторые странные вещи, когда вы это делаете, поэтому попробуйте оба и посмотрите, какой из них работает.

Ответ 3

Удивительно (или нет) инструмент 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> касаются. Поскольку они являются встроенными элементами, пространство фактически добавит пробел между элементом без ширины и вашим div, поэтому не забудьте оставить его.

Ответ 4

В будущем эта проблема будет решена с помощью flexbox. Прямо сейчас поддержка браузера является мрачной, но она поддерживается в той или иной форме во всех существующих браузерах.

Поддержка браузера: 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/

Ответ 5

Здесь нет идеальных ответов, кроме ответа Asaf, который не содержит ни кода, ни какого-либо примера, поэтому я хотел бы внести свой вклад...

Чтобы сделать работу 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;
}

Ответ 6

Как объясняется здесь: http://zizhujy.com/blog/post/2014/09/30/CSS-Make-text-inside-floated-%60lt;li-gt;%60-element-vertically-middle-aligned.aspx.

Как проверено в реальной практике, самым надежным, но элегантным решением является вставка элемента inline-элемента в элемент <li /> в качестве 1-го ребенка, высота которого должна быть установлена ​​на 100% (от высоты его родителей, <li />), а его vertical-align устанавливается в среднее. Для этого вы можете поместить <span />, но наиболее удобным способом является использование класса li:after pseudo.

Снимок экрана: enter image description here

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

Ответ 7

Дайте этому решению попробовать

Лучше всего работает в большинстве случаев

вам может понадобиться div вместо li для этого

.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>

Ответ 8

Как бы много лет не закончился этот ответ, любой, кто попадает сюда, может просто захотеть попробовать

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

Поддержка браузера для flexbox намного лучше, чем когда @scottjoudry опубликовал свой ответ выше, но вы все равно можете рассмотреть префикс или другие параметры, если вы пытаетесь поддерживать гораздо более старые браузеры. caniuse: flex