html - 如何让垂直对齐中间与显示内联块一起使用

Question

html

<ul class="tabs-bottom">
<li><a href="#tab-1">Booking</a></li>
<li><a href="#tab-2">Special Offers</a></li>
</ul>

css

.tabs-bottom{
    list-style: none;
    margin: 0;
    padding: 0;
}
.tabs-bottom li{
    width: 216px;
    height: 55px;
    background: #000;
    display: inline-block;
    text-align: center;
}

演示

Answer 1

我可以用 display table-cell 做到这一点，但我用 display inline-block 强烈搜索

这是带有显示表格单元演示的工作演示

.tabs-bottom{
    list-style: none;
    margin: 0;
    padding: 0;
    border-spacing: 10px 0;
}
.tabs-bottom li{
    width: 216px;
    height: 55px;
    background: #000;
    display: table-cell;
    text-align: center;
    vertical-align: middle;

}

Answer 2

如果你对其他显示属性没问题，你可以diaplsy:table-cell这样使用

.tabs-bottom li{
    width: 216px;
    height: 55px;
    background: #000;
    display: table-cell;
    text-align: center;
    vertical-align:middle;
}

Answer 3

这是你需要让它工作的完整的CSS。这也处理非常长的文本，环绕（多行链接文本）：

.tabs-bottom{
    list-style: none;
    margin: 0;
    padding: 0;
}
.tabs-bottom li{
    width: 216px;
    height: 55px;
    line-height: 50px;
    background: #000;
    display: inline-block;
    text-align: center;
}

.tabs-bottom li a
{
    line-height:16px; /*This is in place, to prevent inheriting the li's line-height*/
    display:inline-block;
    vertical-align: middle;
}

你可以在这个小提琴中测试它：

http://jsfiddle.net/vVnR5/

---

注意

jsFiddle 似乎在 IE 7 和 8 中不起作用，所以我无法测试它。

Answer 4

如果它们只是一条线，你可以用 line-height 将它们居中，

.tabs-bottom li{
    width: 216px;
    height: 55px;
    line-height:55px
    background: #000;
    display: inline-block;
    text-align: center;
}

如果你想要一个多线中心，那就更棘手了，但可以使用display:table-cell;

编辑这是一个无论行数如何都会居中的版本http://codepen.io/robsterlini/pen/btqjv但请记住，对于 IE7 及以下版本，它将默认重新出现在顶部（请参见此处）。