Question

我开发了以下HTML代码。

        <table style="width: 400px; border-collapse:collapse;">
          <tr>
            <td rowspan="4" class="border-full" style="vertical-align: top; height: 100px;">
              <span>It needs to be top:</span>
              <div style="display: block; vertical-align: center; margin-top:auto; margin-bottom:auto;">I need this part to be vertically centered inside rest part of cell</div>
            </td>
          </tr>
        </table>

效果就像

-------------
|first line |
|second line|
|           |
|           |
-------------

我需要效果如下：

-------------
|first line |
|           |
|second line|
|           |
-------------

这意味着我想在一个元素中说出标题和内容。我知道我可以分开td，隐藏边界，就是这样。不幸的是，这是一个带有行窗口的更大桌子的一部分所以我需要找到一个解决方法...... 我不知道元素的高度（它取决于同一行中其他单元格中的文本数量）。

Answer 1

你需要做一些计算。

divHeight=tdHeight-spanHeight

然后应用适当的css.Also使你的div 显示：table-cell 你可以使用jQuery进行计算

$("td").each(function(){
       tdHeight=parseInt($(this).css('height'));
       spanHeight=parseInt($(this).find('span').css('height'));
       divHeight=tdHeight-spanHeight;
       $('.tdDiv').css('height',divHeight);
       $('.tdDiv').css('vertical-align','middle');
})

HTML：

  <table style="width: 400px; border-collapse:collapse;">
    <tr>
      <td rowspan="4" class="border-full" style="vertical-align: top; height: 100px;">
          <span>It needs to be top:</span>
          <div class="tdDiv" style="display: table-cell;margin-top:auto; margin-bottom:auto;">I need this part to be vertically centered inside rest part of cell</div>
      </td>
    </tr>
  </table>

小提琴：http://jsfiddle.net/ankur1990/jSJp3/

如何垂直居中表中的元素而不是所有内容

1 个答案: