使表格单元格内的一个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>

尝试了很多方法，但都不起作用。我正在寻找尽可能简单的解决方案，如高度：100％。

更新：期望结果：

- Khrys

---

你想要垂直居中图标吗？ - dfsq

^ 是的，在 span 标签内。 - Khrys

你是想把“+”图标变大吗？它是一个图标字体，所以你需要使用字体大小来使它变大。我不太确定你在问什么。 - Justin Breiland

Answer 1

简单的解决方案是通过绝对定位相对于父级td将标签延伸：

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伪元素来垂直对齐标签内的图标。

- dfsq

---

td > span.label {position: absolute; top: 5px; bottom: 5px; left: 50%; margin-left: -12px;} - fcastillo

Answer 2

如果需要进行动态定位，确实需要使用 position: absolute。您可以使用 margin 技巧来补充，以便它不必适配100％的宽度（更像您在图像中看到的）。这样是否更符合您的要求？

.table > tbody > tr > td:first-child {
    position: relative;
}

.table > tbody > tr > td:first-child span {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 2em;
    height: 85%;
}

.table > tbody > tr > td:first-child span.glyphicon {
    height: 2em;
    line-height: 2em;
}

http://jsfiddle.net/4LstLagu/

- Joseph Marikle