垂直对齐不在Safari浏览器和铬

<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名称垂直对齐Top.It在Firefox中工作，但不是在铬和Safari浏览器。有人可以帮我？我不想使用绝对位置时，我有一个完美的选择...垂直对齐不在Safari浏览器和铬

来源

2013-06-26 Joshua L

是什么让你觉得它不是在WebKit的工作，但在其他人呢？ –

因为我查过!! ?? –

和你在检查时看到了什么？你认为你应该看到什么？ –

请加显示：inline-block的跨越tag.lik此：

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

请查看demo。

来源

2013-06-26 06:22:07 Airen

我加了.commentator的名字到a.tag，它工作。我不明白我们为什么要把它改成块元素，因为vertical-align在img.tag上是内联元素 –

OK，I我想我找出答案 –

你可以使用flexbox模块，你可以使用display：table。 – Airen

使用div的垂直线图像适用于Chrome和Safari。该代码是：

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

和

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

来源

2014-01-24 09:50:37 user3231455

这在Safari中不起作用 – Tyguy7

垂直对齐不在Safari浏览器和铬

回答

相关问题