html - 使用垂直居中表格不能在 Safari 中工作

Question

我想在 html 中垂直居中对齐表格。我正在使用以下代码，该代码适用于除 SAFARI 之外的所有浏览器。我也需要这个在 sSafari 中工作。出了什么问题？任何帮助将不胜感激。

HTML：

<div tabindex="0" title="Style1" class="button_class size_class" role="button" aria-pressed="false" style="display: table;" unselectable="on">
<div class="Container" aria-hidden="true" style="text-align: center; vertical-align: middle; display: table-cell;">
<table class="Preview">
<tbody>
<tr><td style="">—&lt;/td><td style="">—&lt;/td><td style="">—&lt;/td><td style="">—&lt;/td><td style="">—&lt;/td></tr>
<tr><td style="">—&lt;/td><td style="">—&lt;/td><td style="">—&lt;/td><td style="">—&lt;/td><td style="">—&lt;/td></tr>
<tr><td style="">—&lt;/td><td style="">—&lt;/td><td style="">—&lt;/td><td style="">—&lt;/td><td style="">—&lt;/td></tr>
<tr><td style="">—&lt;/td><td style="">—&lt;/td><td style="">—&lt;/td><td style="">—&lt;/td><td style="">—&lt;/td></tr>
<tr><td style="">—&lt;/td><td style="">—&lt;/td><td style="">—&lt;/td><td style="">—&lt;/td><td style="">—&lt;/td></tr>
</tbody>
</table>
</div>
</div>

CSS：

.button_class {                                     
border:1px solid transparent;
display:inline-block;
margin-left:0px;
margin-right:2px;
}
.size_class {   
width:74px;
height:58px;
overflow:hidden;
}
.container {
height: 48;
width: 64;
white-space: nowrap;
overflow: hidden;
}
.preview {
height: 32px;
width: 64px; 
white-space: nowrap; 
overflow: hidden; 
vertical-align: baseline;
display: block;
}

Answer 1

垂直对齐应用于内联元素

<img align="middle" ...>
<img style="vertical-align:middle" ...>
<span style="display:inline-block; vertical-align:middle"> foo<br>bar </span>

例子：

<style type="text/css">
    #myoutercontainer { position:relative }
    #myinnercontainer { position:absolute; top:50%; height:10em; margin-top:-5em }
</style>
...
<div id="myoutercontainer">
    <div id="myinnercontainer">
        <p>Hey look! I'm vertically centered!</p>
        <p>How sweet is this?!</p>
    </div>
</div>