如何垂直對齊到X高度？

Question

我有一行文字和一個小圖像，我試圖在行內垂直對齊。我的目標是將圖像的垂直中心與文本基線的x高度（或大寫字母高度的一半）對齊。我無法想出任何方式來做到這一點。我所知道的最接近的事是：

vertical-align: middle; 

這種行爲，因爲它在CSS 2.1規範指出：

對齊框的垂直中點與父框加一半的基線父母的x高度

如果有一種方法可以從該定義中刪除世界「一半」，我就會得到我想要的。我該如何做到這一點？

Answer 1

的問題在於，文本坐落在文本基線上，而圖像下降到低於此值。不同的瀏覽器以不同的方式處理。

我最喜歡的解決方案是將圖像顯示爲background-image，其background-position設置爲left center ...您可以季節品嚐。

Answer 2

不知道，如果它是「最好」的答案，但我總是把我的文字的「行高」相匹配的是什麼我試圖居中的高度。

Answer 3

這裏是垂直對齊中心。

http://www.templatespoint.com/blog/2010/10/div-vertical-align-middle/

或使用圖像作爲背景圖像

背景：網址（bg_image.jpg）不重複左中心;