如何在短段中對圖像和文本進行對中？

我有以下幾點：如何在短段中對圖像和文本進行對中？

<p style="height: 25px; line-height: 25px;"> 
    <img width="16" height="16" src="/Content/images/icons/fugue/book-open.png" style="margin-top: 3px;">Test - 5</p>

我嘗試過的一些事情與行高，但它似乎並沒有工作。總是文本將只是幾個字。

如何使圖像中心與文本的中心位置一致？

所以我想的是如下其中X表示圖像：

xxx 
xxx text 
xxx

來源

2012-06-12 Alan2

水平或垂直？ – Geert

對不起。我將在文本的左側顯示圖像。我希望圖像的中心線與文字的中心水平對齊。 – Alan2

看到這個：http://stackoverflow.com/questions/10752678/how-to-stop-elements-moving-around/10752985#10752985 –

你沒有帶說，如果你要水平或垂直對齊的元素，所以我要解釋兩個：

爲垂直取向：
因爲圖像是直列塊默認，它們可以很容易地使用text-align定位。只需在它們之間添加一個類似中斷（<br/>）或在圖像上添加display: block .styling並在段落中使用text-align: center即可。

see it working on jsfiddle。

爲水平取向：
最簡單的解決方案是使用position: relative和top:2px向下移動的圖標。

see it working on jsfiddle

來源

2012-06-12 09:48:44 oezi

或顯示：塊;在img上而不是
可能是更好的選擇。 – Probocop

@Probocop：謝謝你的提示，我補充說。 – oezi

@oezi - 我爲這個問題增加了一些解釋 – Alan2

你嘗試設置圖像元素vertical-align？

來源

2012-06-12 09:48:48 Geert

如果您在img上設置vertical-align: middle;應該這樣做！

注：我已刪除的寬度和高度從樣本屬性，但在這裏看到：http://jsfiddle.net/SZYtB/

來源

2012-06-12 09:49:13 Probocop

如何在短段中對圖像和文本進行對中？

回答

相關問題