Question

我正在使用Twitter Bootstrap 3.x，我有一个表格，其中一个单元格有rowspan =“2”。这是表格行：

<tr>
    <td rowspan="2" class="critical">
        <a href="#"><span class="glyphicon glyphicon-check white"></span></a>
    </td>
    <td colspan="2" class="col-xs-8 col-md-10">
        <b><a href="#">Title</a></b>
    </td>
</tr>
<tr>
    <td class="col-xs-8 col-md-10">
        <em><small>12/07/2014</small></em> - <a><span class="glyphicon glyphicon-paperclip"></span></a></small>
    </td>
    <td class="col-xs-4 col-md-2">
        <em><small  class="pull-right"><a href="#" class="black">Some name</a></small></em>
    </td>
</tr>

我一直在寻找StackOverflow这些解决方案：

使用Bootstrap 3 vert-align类（我在文档中找不到，但有人说它已添加）
使用line-height代替
添加CSS vertical-align：middle
垂直对齐：基线
.........

我已经尝试了所有内容，并且在查看Chrome开发控制台时，每次添加行高或纵向对齐：中间时，它都会被描边并且不会被应用。也试过！重要，但也没有工作。

我想知道是否存在阻止rowspan单元格在中间对齐的东西，如果它是由于rowspan（这是最可能的问题，因为该示例的人在JSFiddle中提供了vertical-align：middle就像魅力）。

如果需要任何额外数据，请更新线程。提前谢谢！

Answer 1

关于以下HTML，您希望垂直对齐 -

<强> HTML

<tr>
    <td rowspan="2" class="critical"> <a href="#" class="aa"><span class="glyphicon glyphicon-check white"></span></a>

    </td>
    <td colspan="2" class="col-xs-8 col-md-10"> <b><a href="#">Title</a></b>

    </td>
</tr>

添加以下CSS以允许td标记内的元素垂直对齐。我已将该类命名为aa，并将其粘贴在第一个anchor标记中的td标记内。

<强> CSS

.aa {
    vertical-align:middle;
}

<强> DEMO JSFiddle

Answer 2

好的，所以我设法解决了。

我将代码更改为

<td rowspan="2" class="critical">
    <div class="input-group-addon">
        <a href="#"><span class="glyphicon glyphicon-check white"></span></a>
    </div>
</td>

我可以最终设法垂直对齐它。我无法提供更准确的理由说明为什么会这样做，但是如果你遇到了这个问题，那么你可以使用CSS的abit来调整TD的大小以满足你的需求。

vertical-align：middle在twitter bootstrap中没有表行rowpan

2 个答案: