垂直對齊在div中的標籤中的中間圖像

Question

這可能以前已經完成，但我無法找到針對特定情況的解決方案。我有以下幾點：

<div class="holder" style="height:260px;width:260px;"> 
<a href="#"><img src="image.jpg" /></a> 
</div> 

我怎樣才能獲得圖像對齊到div的中間？

Answer 1

通常情況下，IMG是一個內聯元素，這意味着，它對齊到父元素的文本的基線。這會在圖像下留下令人討厭的空間。

可以防止這種與

img{ 
    display:[inline-]block; /* or inline-block if the img isn't the only element in your div*/ 
} 

這消除了圖像下方的預留空間。

您可以通過

img{ 
    vertical-align: [top|middle|bottom|baseline|...] ; 
} 

更改對齊根據您的文字對齊。

通常，您只能垂直對齊內聯元素。因此，display:block的圖像不會受到垂直對齊聲明的影響。

Answer 2

添加

text-align: center; 
vertical-align: middle; 
display: table-cell; 

到div的風格。

Answer 3

嘗試：

.img 
{ 
display: block; 
margin-left: auto; 
margin-right: auto 
} 

Answer 4

如果這是你的印記了，那麼你可以使用line-height屬性用於此。就像這樣：

.holder{ 
    line-height:260px; 
}