css - 在单元格表内创建一个 span 以达到 100% 高度

Question

span如何扩展所有的高度？

http://jsfiddle.net/e27wut2p/

<table class="table table-condensed table-hover table-striped">
    <thead>
        <tr>
            <th class="shrink"></th>
            <th class="shrink">AAA</th>
            <th class="shrink">BBB</th>
            <th class="shrink">CCC</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="text-center"><span class="label label-default"><span class="glyphicon glyphicon-plus"></span></span></td>
            <td>1<br>1<br>1<br>1<br>1<br></td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td class="text-center"><span class="glyphicon glyphicon-plus"></span></td>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td class="text-center"><span class="glyphicon glyphicon-plus"></span></td>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
    </tbody>
<table>

试了很多方法，都没用。我正在寻找一个尽可能简单的解决方案，例如 height: 100%。

更新:预期结果:

Answer 1

简单的解决方案是借助相对于父 td 的绝对定位来拉伸(stretch)标签:

td {
    position: relative;
}
td > span.label {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
td > span.label:after {
    content: '';
    height: 100%;
    display: inline-block;
    vertical-align: middle;
}

演示:http://jsfiddle.net/e27wut2p/4/

此外，我还使用 span.label:after 伪元素将标签内的图标垂直对齐。