如何最好地垂直居中圖像和div內的一些文本

我經常遇到這個挑戰 - 當試圖解決時，我總是想知道我是否做錯了。如何最好地垂直居中圖像和div內的一些文本

在'div'中，我想將圖像定位到左側 - 和一些相應的文本向右 - 我希望它們呈現垂直居中。什麼是最好的方法來做到這一點？

目前我XHTML是這樣的：

<div class="key"> 
<img alt="required" src="/images/forms/asterisk.png?" /> required 
</div>

下面是它目前的樣子 - http://screencast.com/t/NGMxMjRmMmYt（你會看到星號圖像不垂直的「必需的」文本對齊Boooo

。

我通常會考慮定位圖像，然後添加一些左填充以移動文本，然後調整頂部和底部填充以使文本垂直居中。最後，這種方法看起來工作太多了。

來源

2010-01-21 rsturim

添加給你的風格應該做它：

.key * { 
    vertical-align: middle; 
}

你基本上說「關鍵類元素內的每個元素都需要垂直居中」。這是我遵循的標記（通常是.button類），適用於IE，Chrome，FF，Safari。

來源

2010-01-21 18:17:15 Parrots

如果容器的DIV和Image都有固定的寬度和高度，那麼你可以使用CSS，但如果不是，jQuery Center Plugin是迄今爲止最好的解決方案。

來源

2010-01-21 18:07:31 3zzy

有多種選擇（請參閱Vertical Centering with CSS瞭解完整的概要）。哪一個最好取決於許多因素，最重要的是你是否知道你的內容的尺寸。

如果你只是想在中心相對於圖像的文本，設置文本的line-height到圖像/容器的高度可能是最簡單的方法...

來源

2010-01-21 18:07:40 bdukes

'line-height'在瀏覽器引擎之間不能一致地工作以進行垂直居中。我通常會在Webkit中獲取像素太低的文本，Gecko中的像素太高。所以我選擇明確的高度與相對位置（50％）和負頂邊（高度的一半），通常在文本的父錨。如果它是無錨的，那麼需要一個跨度，可悲的是。 – jonwd7 2010-01-21 18:23:35

下面的CSS將工作：

.key img { 
    vertical-align: middle; 
}

希望這可以幫助！ :-)

來源

2010-01-21 18:59:30

鍵類內的所有圖像將垂直對齊。 – 2010-01-21 19:00:41

如何最好地垂直居中圖像和div內的一些文本

回答

相關問題