Question

我知道这个问题在这里已多次提出，但没有找到合适的答案。我管理了一个解决方法，使div完全高度为td。但似乎不可能将文本垂直对齐在中间。知道我怎么能做到这一点？我希望它能够做出回应。我的意思是在所有设备上工作。感谢。

<tr>
    <td>
        Small text
    </td>
    <td class="" style="height: 1px; height: 100%">
        <div style="position: relative">
            <span class="centered-text"> A very long text that I want to be centered inside parent div and of course parent td.</span>
        </div> 
    </td>
</tr>

Answer 1

尝试将以下CSS添加到您的div：

div{
    display: table-cell;
    vertical-align: middle;
}

display属性会使div的行为更像表格单元格，这意味着垂直对齐样式会产生影响。

示例：http://codepen.io/JasonGraham/pen/aZbdmy

Answer 2

在没有看到任何代码的情况下，给您一个确切的答案有点困难。但是我最喜欢的解决这个问题的方法，特别是对于响应式解决方案，（只要你不需要支持IE9以下的任何东西）如下：

.text-container {
  position: relative;
}

.centered-text {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

如果它还需要水平居中，请使用以下添加并替换转换属性：

.centered-text {
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

编辑：更新fiddle与位置相对，填充空格 - 显示最终完全居中的结果。

Answer 3

使用内联CSS

style="display:table-cell;vertical-align: middle;"

您可以在表格中设置td的高度，例如

style="display:table-cell;vertical-align: middle;  height:200px;"

示例：

<tr>

<td  style="display:table-cell;vertical-align: middle;">
    <h1>some text</h1>
</td>

<td>
    <img src="imagepath.jpg" height="100" width="100"
</td>

</tr>

Div全高度TD，文字垂直中间

3 个答案: