Q

vertical-align：middle無法按預期工作

2010-11-24 12 views 1 likes

1

我只想將圖像置於固定高度的容器中：圖像不得超過容器的高度，並且必須垂直居中。vertical-align：middle無法按預期工作

所以我

<div id="partenaires"> 
    <img src="images/partenaires/Debian.png" alt="Debian" /> 
    <img src="images/partenaires/Fedora.png" alt="Fedora" /> 
    ... 
</div>

與

#partenaires { 
    height:3em; 
    line-height:3em; 
    white-space:nowrap; 
    overflow:hidden; 
    clear:both; 
} 
#partenaires img { 
    vertical-align:middle; 
    margin:0 1em; 
    max-height:100%; 
}

但現在看來，大的圖像被截斷底部像這樣（爲所有的瀏覽器），因爲vertical-align：

alt text

我應該如何去做我想要的？我真的不明白這種行爲...

在此先感謝！

編輯：你可以嘗試所有你想要的here！

2010-11-24 MatTheCat

+1

`height：3em;溢出：隱藏`這使得我認爲這有點期待。你能刪除溢出規則嗎？ – 2010-11-24 08:21:42

+0

不幸的是，我用它來實現一個滑塊。但我確定圖像的高度確實是容器的高度，它們只是不垂直居中！ – MatTheCat 2010-11-24 08:25:44

+0

@Mat如果你刪除`line-height`，會發生什麼？ – 2010-11-24 08:26:22

A

回答

4

我猜你應該使用2.7em的行高值，因爲行上面和下面有一些額外的空間，所以3em的行高不適合高度爲3em的div，這就是爲什麼你的圖像會被剪裁。

編輯：2.78似乎不錯。

2010-11-24 09:26:26 Michael

1

你可以使用align =「absmiddle」而不是vertical-align：middle;

希望這將有助於

2010-11-24 08:27:23

0

vertical-align:baseline;按預期工作（注：我試過只在Safari和FF）或從容器中取出overflow:hidden（如果你清理目的定義只是改變結算方法）

2010-11-24 08:53:35

相關問題