Вертикальный текст Выровнять в ListItem

Question

Эй У меня есть список с примерно 20 элементов с именами классов, поэтому 5а, 5б и т.д.

<ul id="menu"> 
    <a href="#"><li><span>5a</span></li></a> 
    <a href="#"><li><span>5b</span></li></a> 
    ... 
</ul> 

CSS:

#menu li 
{ 
    margin: 15px; 
    width: 100px; 
    height: 100px; 
    text-align: center; 
    display: inline-block; 
    font-weight: bold; 
    color: white; 
    font-size: 50px; 
    font-family: Calibri; 
    border-radius: 2px; 
    position: relative; 
} 

Так it looks like this.

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

Answer 1

Если есть только одна строка текста за li, просто добавьте line-height в соответствии с высотой li. Текст будет затем вертикально по центру в пределах 100px его контейнера:

#menu li 
{ 
    line-height: 100px; 

    margin: 15px; 
    width: 100px; 
    height: 100px; 
    text-align: center; 
    display: inline-block; 
    font-weight: bold; 
    color: white; 
    font-size: 50px; 
    font-family: Calibri; 
    border-radius: 2px; 
    position: relative; 
    background:#f44; 
} 

Working example at JSFiddle

Если вам нужно больше, чем одну строку текста, попробуйте как display: table-cell и vertical-align: middle; вместо line-height: 100px;. Это (и другие методы вертикального центрирования) описаны here.

Answer 2

text-align: center; используется лучше всего, чтобы центрировать текст. line-height:80px; - центрировать текст по горизонтали.

Ваше меню меню выглядит немного странно. Что-то вроде этого является более распространенным

<div id="menu"> 
    <ul> 
     <li> 
      <a href="#"><span>5a</span></a> 
     </li> 
     <li> 
      <a href="#"><span>5b</span></a> 
     </li> 
    </ul> 
</div> 

Link to working Fiddle

надеюсь, что это ответ на ваш вопрос :)

Answer 3

Я использую этот подход (для IE8 +):

<h2> ie8+ </h2> 
<ul id="menu" class="menu"> 
    <a href="#"><li><span>5a</span></li></a> 
    <a href="#"><li><span>5b</span></li></a> 
    <a href="#"><li><span>5c</span></li></a> 
    <a href="#"><li><span>5d</span></li></a> 
    <a href="#"><li><span>5e</span></li></a> 
</ul> 

Css:

#menu li 
{ 
    margin: 15px; 
    width: 100px; 
    height: 100px; 
    text-align: center; 
    display: inline-block; 
    font-weight: bold; 
    color: white; 
    font-size: 50px; 
    border-radius: 2px; 
    position: relative; 
    background:red; 
} 
#menu li:after{ 
    content:''; 
    display:inline-block; 
    height:100%; 
    width:1px; 
    overflow:hidden; 
    margin:0 0 0 -5px; 
    vertical-align:middle; 
} 
#menu li span{ 
    vertical-align:middle; 
    display:inline-block; 
    white-space:normal; 
} 

подход (для IE6 +):

<h2> ie6+ </h2> 
<ul id="menu2" class="menu"> 
    <a href="#"><li><div class="holder"><div>5a</div></div></li></a> 
    <a href="#"><li><div class="holder"><div>5b</div></div></li></a> 
    <a href="#"><li><div class="holder"><div>5c</div></div></li></a> 
    <a href="#"><li><div class="holder"><div>5d</div></div></li></a> 
    <a href="#"><li><div class="holder"><div>5e</div></div></li></a> 
</ul> 

#menu2 li .holder{ 
    display:table; 
    width: 100px; 
    height: 100px; 
} 
#menu2 li .holder > div{ 
    width:100%; 
    display:table-cell; 
    vertical-align:middle; 
} 

Для т.е. exprations использования:

#menu2 li .holder > div { margin-top: expression(this.parentNode.offsetHeight > this.offsetHeight ? ((this.parentNode.offsetHeight-this.offsetHeight)/2 + "px") : "0"); } 

Следуйте по ссылке

http://jsfiddle.net/X2e4A/1/

или простой способ, если текст не будет расти:

.menu li 
{ 
    margin: 15px; 
    width: 100px; 
    height: 100px; 
    text-align: center; 
    display: inline-block; 
    font-weight: bold; 
    color: white; 
    font-size: 50px; 
    border-radius: 2px; 
    position: relative; 
    background:red; 
    line-height:100px; 
}