將文本垂直對齊左側的浮動圖像

現在我知道還有類似的問題發佈，但我正在尋找像素完美的解決方案。將文本垂直對齊左側的浮動圖像

問題試圖解決： Problem

嘗試代碼：

.mi{float:left; width:150px;height:200px;padding-right:10px;/*margin-top:3px;*/} 
.mt{float:left; width:400px;margin:0;}

在我使用了填充/保證金黑客推圖像過去或文本對象向下幾個像素，以使它們在頂部邊緣處視覺對齊。從視覺上來說，我的意思是我知道字體有一個大小和行高，但即使考慮到這一點，實際字體字符的高度可能會包含一些空間。這可以在我上面的示例中看到。我也基於其他線程（這裏使用了line-height），儘管它確實實現了像素完美對齊，但它卻損壞了整個段落的垂直行間距。

我的問題基本上是是否繼續使用填充/邊緣黑客或是否有更合理的解決方案。我問這是關於建築佈局的響應，然後沒有統一佈局的問題。

在此先感謝。

來源

2014-09-23 brooklynsweb

我不認爲有任何替代方案像素，你正在做的事情。 – Alohci 2014-09-23 16:05:48

而不是float使用display:table;佈局完美的內聯放置和垂直對齊。

它只需要你的元素中包裝它們...

Updated JSFiddle

.wrapper { 
 
    display: table; 
 
} 
 

 
.mi{width:200px;height:200px;display: table-cell;} 
 
.mt{display: table-cell;vertical-align:middle;}

<div class="wrapper"> 
 
    <img src="http://www.thehollywoodnews.com/wp-content/uploads/2839335-morgan_freeman_wallpaper_4_normal.jpg" class="mi"> 
 
    <p class="mt">Join me in San Diego at the Global Event for Data-Driven Engagement Marketers. DMA is doing great work to protect marketers around the world, come and hear from leading marketers how DMA is enabling them to NOT MARKET ALONE</p> 
 
</div>

來源

2014-09-23 15:44:52 LcSalazar

嗨LcSalazar，你的樣品並沒有解決我的問題，文字沒有對齊像素完美的圖像的頂部。我在鉻，這就是我[見]（http://i.imgur.com/0IuROXT.png） – brooklynsweb 2014-09-23 15:52:21

@brooklynsweb，對不起，我以爲你的意思是對齊中間... – LcSalazar 2014-09-23 15:54:34

的空間應該在那裏它通常來自線高度爲你需要的東西。如果你的字體大小是14px，並且你將linee-height降低到11px，那麼你會發現這個差距會從頂部消失，但是文字會顯得很擁擠。

有時候爲了獲得像素完美，你必須像你一樣調整有圖像上的邊距..

來源

2014-09-23 16:50:54

將文本垂直對齊左側的浮動圖像

回答

相關問題