垂直對齊不在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瀏覽器和鉻

回答

相關問題