IE：中间垂直对齐表

我的页面水平和垂直居中，页面适用于所有浏览器，但对于IE，页面只适用于IE11（最新）。在IE 10,9和8中，表格在页面顶部垂直对齐。如何在IE 10,9和8中进行垂直对齐工作，需要更改哪些内容？IE：中间垂直对齐表

的Html

<body> 
<div class="container"> 
    <div class="content"> 
    <table width="350px"> 
     <tr> 
      <td> 
       <img border='0' src='https://upload.wikimedia.org/wikipedia/commons/a/a5/Information_example_page2_300px.jpg' width='300' height='300' style="margin:25px 25px 50px 25px;"> 
      </td> 
     </tr> 
     <tr> 
      <td align="center"> 
       <p style="margin: 0px 0px 50px 0px;">Street<br> 
        0000AA City 
       </p> 
      </td> 
     </tr> 
     <tr> 
      <td align="center" class="contact"> 
       <p style="margin: 0px 0px 50px 0px;"> 
        <span style="color:#DDB4A4;">T</span>&nbsp; <a href="tel:000000">000000</a><br> 
        <span style="color:#DDB4A4;">E</span>&nbsp; <a href="mailto:[email protected]">[email protected]</a><br> 
       </p> 
      </td> 
     </tr> 
     <tr> 
      <td align="center"> 
       <p style="color:#999999; margin: 0px 0px 25px 0px; font-size: 16px;">Text</p> 
      </td> 
     </tr> 
    </table> 
    </div> 
</div> 
<body>

的CSS

html, body 
    { 
     margin: 0; 
     padding: 0; 
     width: 100%; 
     height: 100%; 
     display: table; 
    } 
    .container { 
     display: table-cell; 
     text-align: center; 
     vertical-align: middle; 
    } 
    .content { 
     display: inline-block; 
     text-align: left; 
    } 
    table { 
     font-size:18px; 
     font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; 
     color: #4D4D4D; 
    } 
    .contact a:link 
    { 
     color: #4D4D4D; 
     text-decoration: none; 
    } 
    .contact a:hover 
    { 
     color: #1a0dab; 
     text-decoration: underline; 
    }

的jsfiddle：https://jsfiddle.net/64ys7j6n/

来源

2015-10-29 Sybren

旧的IE无法处理display:table为HTML和身体非常好。此外，这不是必需的。

解决方法：请勿将display:table指定为html，仅限于body。 html只需要height:100%。

html { 
    height:100%; 
} 
body 
{ 
    margin: 0; 
    width: 100%; 
    height: 100%; 
    display: table; 
}

New fiddle

来源

2015-10-29 08:27:00

现在，表是在每一个浏览器的顶部对齐，我想表是垂直的中间对齐。 – Sybren

任何想法解决它？ – Sybren

哦，我很抱歉，我没有足够的咖啡显然。我有它的工作，然后我发布之前删除未使用的CSS。但它并没有真正被使用！所以我编辑了答案并纠正了它。对于那个很抱歉。 –

IE：中间垂直对齐表

回答

相关问题