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

Question

I have positioned some div element inside the TD element with left value by using position: absolute and left value but i need to align the div vertically in middle without fixed margin and padding value, because my TD height can be anything . I have added sample for reference, any help?

 .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> 

Thanks,

Answer 1

You could use display: inline-block for the div's and vertical-align:middle for the cell. It then aligns the div's vertical in the middle, no matter how high the table row is.

  .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>

Fiddle

Note that, unlike float , with inline-block whitespace between the div's will be displayed! So unless you code them as <div>...</div><div>...</div> you can see some unwanted extra space.