it-swarm.com.ru

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

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

Я не ищу трюки, использующие (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>
84
AK4668

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

91
Asaf Chertkoff

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

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

51
Logan Serman

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

15
Wex

В будущем эта проблема будет решена с помощью 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/

10
Scott Joudry

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

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

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

7
flyingace

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

Для того, чтобы 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;
}
5
Mr. Alien

Как объясняется здесь: https://css-tricks.com/centering-in-the-unknown/ .

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

Скриншот: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;
}
3
Jeff Tian

Попробуйте это решение

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

вам, возможно, придется использовать 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>

1
keshav

Простое решение для вертикального выравнивания по середине ... для меня это работает как шарм 

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;}
0
Fahad Ali