用文字正確定位圖像

我試圖使圖像正確顯示爲文本，並且同時位於垂直軸的中間以適應導航欄。用文字正確定位圖像

目前，我只能讓它內聯顯示，但它總是接近酒吧的底部，而不是頂部。

HTML：

<div id='profileBar'> 
<img src='karl.png' width=25 id='profileBarPic'/> 
Damen 
</div>

CSS：

#profileBar { 
    float: right; 
    padding-right: 10px; 
} 
#profileBarPic { 
    width: 25px; 
    display: inline; 
    float: left; 
    padding-right: 10px; 
}

是什麼樣子：

What it looks like

來源

2013-08-27 sauron

難道你不能只改變它只增加一個小幅底部的圖片？（這只是一個猜測，因爲很難看到問題出在哪裏，jsfiddle會很方便） –

旁邊的文字圖像？這就是圖像一直工作的方式。你可以少了很多標記預期的影響：

<div id='profileBar'> 
    <img src='http://placekitten.com/50/50' id='profileBarPic'/> 
    Damen 
</div>

和CSS：

#profileBarPic { 
    vertical-align: middle; 
}

Fiddle

一點解釋。 img基本上是一個內聯元素，因此不需要添加float和display: inline。

默認情況下imgaligns with the baseline of its container（圖像的下邊緣將與它旁邊的文本行的底部對齊）。 vertical-align更改img應與自己對齊（在這種情況下，您想要中間）。

來源

2013-08-27 17:55:35 SlightlyCuban

嘗試上傳旁邊添了小提琴E，我想這應該不過解決這個問題：

#profilebar { 
    float: right; 
    padding-right: 10px; 
    display: table-cell; 
    vertical-align: middle; 
}

來源

2013-08-27 17:54:24

把你的文字變成跨度或東西，所以，你可以在它和<img>把display:inline-block。這樣，你將不需要0。然後申請一個vertical-align:middle

這樣：

HTML：

<div id='profileBar'> 
<img src='karl.png' width='25' id='profileBarPic'/> 
<span>Damen</span> 
</div>

CSS：

#profileBar { 
    float: right; 
    padding-right: 10px; 
} 
#profileBar span {display:inline-block; vertical-align:middle; } 
#profileBarPic { 
    width: 25px; 
    display: inline-block; 
    vertical-align:middle; 
    padding-right: 10px; 
}

來源

2013-08-27 17:55:32 daleyjem

用文字正確定位圖像

回答

相關問題