Question

我想在html中对齐一个表VERTICALLY。我正在使用以下代码，该代码适用于除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="">—</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;
}

Answer 1

vertical-align应用于内联元素

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

使用<div>在Safari </div>中无效地将表垂直居中

1 个答案: