html - 在Safari中,使用 <div> 垂直居中一个 table 不工作

  显示原文与译文双语对照的内容
100 1

我想在html中垂直对齐一个 table 。 我正在使用下面的代码,除了SAFARI之外,所有浏览器都。 我需要这个在safari工作。 怎么了会有帮助的。

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="">—</td><td style="">—</td><td style="">—</td><td style="">—</td><td style="">—</td></tr>
<tr><td style="">—</td><td style="">—</td><td style="">—</td><td style="">—</td><td style="">—</td></tr>
<tr><td style="">—</td><td style="">—</td><td style="">—</td><td style="">—</td><td style="">—</td></tr>
<tr><td style="">—</td><td style="">—</td><td style="">—</td><td style="">—</td><td style="">—</td></tr>
<tr><td style="">—</td><td style="">—</td><td style="">—</td><td style="">—</td><td style="">—</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;
}

时间: 原作者:

97 5

vertical-align 应用于 inline 元素


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

...