html - 无法将文本放在 CSS3 中的框中间

Question

我想在 CSS3 中将文本放在框的中间，但由于某些原因无法正常工作。

这是我的代码片段(来自 Angularjs 的代码):

    <div class="a" ng-repeat="i in l | filter:query">
            <a class="b" href="{{i.a}}">{{i.b}} {{i.c}}</a>
    </div>

这是我的 CSS:

.b {
display: inline-block;
float: left;
margin: 8px;
height: 20px;
width: 100px;
}

即使我将 vertical-align: middle; 添加到上面的 CSS，它也不会将文本放在框的中间...为什么？

谢谢。

Answer 1

你需要使用css table-cell

演示 http://jsfiddle.net/LstNS/31/

.b {
    display: table-cell;
    vertical-align: middle;
}
.a {
    display: table;
    height: 200px;
    border: black thin solid;
}