时间戳

首页 > 解决方案 > 将绝对定位的 DIV 与 IE11 中 TD 元素内的左值垂直对齐

html - 将绝对定位的 DIV 与 IE11 中 TD 元素内的左值垂直对齐

问题描述

我已经通过使用position: absolute 和 left值在 TD 元素内定位了一些 div 元素，但我需要在中间垂直对齐 div 没有固定边距和填充值，因为我的 TD 高度可以是任何值。我添加了示例供参考，有帮助吗？

.content {
  position: absolute;
  left: 20px;
  background: grey;
  width: 100px;
  height: 20px;
}

td {
  border: 1px solid grey;
  border-collapse: collapse;
  /* Works in chrome, Firefox, Edge but not in IE 11*/
  display: flex;
  align-items: center;
}

.content2 {
  position: absolute;
  left: 140px;
  background: grey;
  width: 100px;
  height: 20px;
}
<table>
  <tr>
    <td style='width:300px;height:30px;'>
      <div class='content'>
      </div>
      <div class='content2'>
      </div>
    </td>
  </tr>
</table>

谢谢，

标签： htmlcssinternet-explorerinternet-explorer-11

解决方案

您可以display: inline-block用于 div 和vertical-align:middle单元格。然后无论表格行有多高，它都会在中间对齐 div 的垂直线。

  .content {
     display: inline-block;
     background: grey;
     width: 100px;
     height: 20px;
     vertical-align: middle;
   }
  tr{
    height: 90px;
  }
   td {
     border: 1px solid grey;
     border-collapse: collapse;
   }

   .div1{
     margin-left: 20px;
   }
   .div2{
     margin-left: 40px;
   }

<table>
  <tr>
    <td style='width:300px;height:30px;'>
      <div class='content div1'>
      </div>
      <div class='content div2'>
      </div>
    </td>
  </tr>
</table>

小提琴

请注意，与floatdiv不同的是，将显示 div 之间的inline-block 空格！因此，除非您对它们进行编码，否则您<div>...</div><div>...</div>会看到一些不需要的额外空间。

推荐阅读