Question

有人知道如何在div内垂直对齐td吗？我尝试使用vertical-align:middle，但没有任何结果。

对于同样的问题，已经存在其他一些问题，但它们并没有为我的案例提供解决方案。

在我的下面示例中，我需要将div与thread内的td字符垂直对齐。这需要在不使用幻数（固定高度或行高值）的情况下完成，我无法找到解决方案...

HTML：

<table>
  <tbody>
    <td class="thread-title">
        <div class="rating">
          <div class="positive_votes">
            <span class="bz-icon" title="Upvote this thread">
            </span>
          </div>
          <span class="score">1</span>
          <div class="negative_votes ">
            <span class="bz-icon" title="Downvote this thread">
            </span>
          </div>

        </div>
        <div class="thread">
          <span><a class="title ">thhhhhhhhhhhhhhrrrrrrrrrrrrrrrrrrr</a></span>
        </div>
    </td>
  </tbody>
</table>

CSS：

.positive_votes, .negative_votes {
  width: 15px;
  height: 15px;
  background-color:blue;
}
.rating {
  margin-right: 5px;
  float: left;
}
.thread {
  display:inline-block;
}

Answer 1

position: relative;
transform: translateY(-50%);
top: 50%;

Answer 2

将display:inline-block;和vertical-align:middle;添加到两个div，并从float: left;移除.rating：

.rating {
  margin-right: 5px;
  display:inline-block;
  vertical-align:middle;
}
.thread {
  display:inline-block;
  vertical-align:middle;
}

https://jsfiddle.net/zg9qtunk/3/

如何在表格单元格中垂直对齐div

2 个答案: