Html 垂直对齐：中间在带有表格 rowspan 的 twitter bootstrap 中不起作用

vertical-align: middle is not working in twitter bootstrap with table rowspan

提问by Aitor Martin Gonzalez

I'm using Twitter Bootstrap 3.x and I've got a table where a cell has rowspan="2". Here is the table row:

我正在使用 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>

I've been looking trough StackOverflow for these solutions:

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

• Use Bootstrap 3 vert-align class (which I couldnt find in docs but someone said its added)
• Use line-height instead
• Add CSS vertical-align: middle
• Vertical-align: baseline
• .........

• 使用 Bootstrap 3 vert-align 类（我在文档中找不到，但有人说它添加了）
• 改用行高
• 添加 CSS 垂直对齐：中间
• 垂直对齐：基线
• …………

I've tried everything, and looking at Chrome dev console, everytime I add line-height or vertical-align: middle, it appears stroked and isn't applied. Tried also with !important but didnt work either.

我已经尝试了所有方法，并查看 Chrome 开发控制台，每次添加 line-height 或 vertical-align: middle 时，它​​都会出现描边且未应用。也尝试过 !important 但也没有用。

I'd like to know if there is something preventing the rowspan cell to be aligned in middle, if it's due to rowspan (which is the most probable issue since the example's people have provide in JSFiddle vertical-align: middle works like a charm).

我想知道是否有什么东西阻止 rowspan 单元格在中间对齐，如果它是由于 rowspan （这是最可能的问题，因为示例的人在 JSFiddle 中提供了垂直对齐：中间就像一个魅力） .

If there is any extra data needed Ill update the thread. Thanks in advance!

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

采纳答案by Aitor Martin Gonzalez

Okay so I managed to fix it.

好的，所以我设法修复它。

I changed the code to

我把代码改成

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

and I could finnally manage to vertically align it. i can't provide more accurate reasons for why this works, but if you are having this problem with bootstrap you can aftwerwards use abit of CSS to resize the TD to your necessities.

我最终可以设法垂直对齐它。我无法提供更准确的原因来解释为什么会这样，但是如果您在引导程序中遇到此问题，您可以稍后使用 CSS 来根据您的需要调整 TD 的大小。

回答by Jaroslav Kubo?

Bootstrap uses selector like (shortened):

Bootstrap 使用类似（缩短）的选择器：

.table>tbody>tr>td {
    vertical-align: top;
}

So it has bigger priority that your single class selector (.vertical-center). So use either more specific selector or !important

因此，您的单个类选择器 ( .vertical-center)具有更大的优先级。所以使用更具体的选择器或!important

.vertical-center {
    vertical-align: middle !important;
}

回答by BuddhistBeast

In regards to the following HTML you would like to vertically align -

关于您想要垂直对齐的以下 HTML -

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>

Add the following CSS to allow for the element within the tdtag to become vertically aligned. I have named the class aaand stuck it inside of the anchortag in the first tdtag.

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

CSS

CSS

.aa {
    vertical-align:middle;
}

DEMO JSFiddle

演示 JSFiddle