如何在html/css中的圖像旁邊顯示垂直居中文本？

什麼是最好和最簡單的方式垂直居中文本旁邊的圖像在HTML中？需要瀏覽器版本/類型不可知論者。純html/CSS解決方案。如何在html/css中的圖像旁邊顯示垂直居中文本？

2009-06-08 LordHits

我總是依傍this solution。不要太黑客，並完成工作。

編輯：我應該指出，你可能會達到你想要的效果與下面的代碼（原諒內聯樣式;他們應該在一個單獨的工作表）。看起來，圖像（基線）上的默認對齊將導致文本與基線對齊;設置到中間讓事情很好地呈現，至少在FireFox 3中。

<div> 
    <img src="http://stackoverflow.com/content/img/so/logo.png" style="vertical-align: middle;"/> 
    <span style="vertical-align: middle;">Here is some text.</span> 
</div>

來源

2009-06-08 21:08:19 ajm

這可以工作。謝謝。一個觀察，雖然你的風格屬性你的跨度。如果我刪除它，它似乎不會在視覺上改變任何東西（在FF3.0.10和IE7中）。那仍然需要？ – LordHits 2009-06-09 00:55:24

是的。 CSS中的垂直對齊與您認爲的方式完全相反：單個元素必須在父元素內垂直對齊，而不是告訴父元素垂直對齊其所有子元素（就像我們在表格單元格中所做的那樣）。 – ajm 2009-06-09 13:40:35

不幸的是，如果文字換行，這不起作用。只有第一行居中，其他圖像在圖像下方溢出（而不是全部居中，包裹在圖像的右側）。 http://jsfiddle.net/vPpD4/ – Spongman 2014-06-11 23:20:37

-2

想到的將是把該項目到一個表，有兩個細胞，一個帶有文本，其他與圖像，並使用風格=一個基本方式「VALIGN：中心」與標籤。

來源

2009-06-08 21:08:10 Brian

「valign」在css中不存在。你把`valign =「center」`與`style =「vertical-align：middle」`混合起來了`` – etuardu 2014-01-04 15:06:10

這很有趣。如果事先知道文本容器的高度，則可以使用與該高度相同的行高，並且應該垂直居中文本。

來源

2009-06-08 21:09:04

有2種方式：使用圖像標籤的屬性ALIGN =「absmiddle」 或定位在一個表中的容器DIV或TD的圖像和文字，並用

style="vertical-align:middle"

來源

2009-06-08 21:09:20 backslash17

有幾個選項：

可以使用的line-height，並確保它是一座高大的含元素
使用顯示：表單元格的d垂直對齊：中間

我的首選選項是第一個選項，如果它是空格，或者是其他選項。

來源

2009-06-08 21:09:40

「純HTML/CSS」是否排除使用表格？因爲他們會很容易地做你想要什麼：

<table> 
    <tr> 
     <td valign="top"><img src="myImage.jpg" alt="" /></td> 
     <td valign="middle">This is my text!</td> 
    </tr> 
</table>

火焰我所有你喜歡，但工程（和老，janky瀏覽器上運行）。

來源

2009-06-08 21:10:20 inkedmn

我推薦使用表與<td valign="middle">（所提到的，在所有瀏覽器的工作原理爲inkedmn），但如果你有一個鏈接包裹，這裏是如何做到這一點（在醜陋的老瀏覽器中工作過，如Opera 9 ）：

<a href="/" style="display: block; vertical-align: middle;"> 
    <img src="/logo.png" style="vertical-align: middle;"/> 
    <span style="vertical-align: middle;">Sample text</span> 
</a>

來源

2014-09-08 08:23:29 evilReiko

如何在html/css中的圖像旁邊顯示垂直居中文本？

回答

相關問題