html - 垂直对齐几个 li 标签中的文本， float 为 :left attribute

Question

我想设置 vertical-align:midle;将文本放入 li 标签中。这在我的代码中，但它不起作用...

HTML 代码:

<div id="container">
<ul id="selectable">
    <li class="ui-state-default">AAAA </li>
    <li class="ui-state-default">BBB BBB</li>
    <li class="ui-state-default">CCC </li>
    <li class="ui-state-default">DD</li>
    <li class="ui-state-default">FFFFF</li>
</ul>
<div>

CSS 代码:

#container{position:relative; top:30px;}

#selectable{ list-style-type: none;
    margin: 0;
    padding: 0;
    width: 450px;
    display:table;  }

#selectable li{width:80px;
    height:80px;
    margin:4px;
    padding:8px;
    text-align:center;
    float:left;
    list-style:none;
    display: table-cell;
    vertical-align:middle;}`

Answer 1

只需设置您的 line-height等于 height的 <li>元素。

#selectable li {
    line-height:80px;
    /* ... your own properties */
}

应该适用于所有浏览器

另外一个link关于如何垂直对齐。 以及指向有效 solution 的链接