html - 垂直对齐在 safari 和 chrome 中不起作用

Question

<div class="commentator grid_3">
    <img src="http://img.gawkerassets.com/img/183mxcnx46v2cjpg/avt-large.jpg" alt="commentator">
    <span class="commentator-name"><a href="#">Joshua</a></span>
</div>

所以我将commentator-name vertical-align 设置为Top。它在firefox 中有效，但在chrome 和safari 中无效。有人可以帮我吗？当我有一个完美的选择时，我不想使用绝对位置...

Answer 1

请将 display:inline-block 添加到 span tag.lik 这个：

.commentator-name{
  display:inline-block;
  vertical-align: top;
}

请查看演示。

Answer 2

带有 in div 的垂直线图像适用于 Chrome 和 Safari。代码是：

<div class="image-wrap">
    <img src="xyz.png"/>
</div>

和

.image-wrap {
    display:table-cell;
    width:400px;
    vertical-align:middle;
}