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

demo

Answer 1

我可以使用display table-cell执行此操作，但我强烈搜索display inline-block

这是使用display table-cell demo

的工作演示

.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

如果它们只是一条线，你可以用线高，

来居中

.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及以下的顶部（{{3} }）。

如何让vertical-align中间工作与显示内联块

4 个答案: