CSS 垂直 alignment 問題

Question

考慮以下示例：（此處為現場演示）

HTML：

<div id="outer_wrapper">
    <div class="wrapper">
        <a><img src="http://img.brothersoft.com/icon/softimage/s/smiley.s_challenge-131939.jpeg" /></a>
    </div>
    <div class="wrapper">
        <a><img src="http://assets.test.myyearbook.com/pimp_images/home_page/icon_smiley.gif" /></a>
    </div>
    <div class="wrapper">
        <a><img src="http://thumbs3.ebaystatic.com/m/mvHqVR-GDRQ2AzadtgupdgQ/80.jpg" /></a>
    </div>
    <div class="wrapper">
        <a><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/f/fa/718smiley.png/60px-718smiley.png" /></a>
    </div>
</div>

CSS：

#outer_wrapper {
    background-color: #bbb;
    width: 350px;
}
.wrapper {
    display: inline-block;
    border: 1px solid black;
    width: 90px;
    height: 100px;
    text-align: center;
    margin-right: 20px;
}
a {
    display: inline-block;
    width: 80px;
    height: 80px;
    border: 1px solid red;
}

output 是：

1. 為什么黑色wrapper沒有垂直對齊？ 我怎么能解決這個問題？
2. 圖像在紅色框中水平居中。 我怎么能垂直居中它們？

如果可能，請不要更改 HTML。

Answer 1

觀察它是對齊的圖像的基礎。 這與vertical-align有關； 如果您在.wrapper上使用除baseline之外的vertical-align值，例如top 、 middle或bottom ，它將修復它。 （只有在div中也放入一些文本時，它們之間的區別才會很明顯。）

然后，您希望將圖像置於 80x80 點的中心。 您可以使用display: table-cell和vertical-align: middle在a上（並添加line-height: 0以解決更多問題）。 然后，您可以在a標簽、 .wrapper中混合這些 styles 組，或者甚至在不需要時.wrapper （僅需要 - 如果需要的話 - 如果你是將文本放入其中）。

結果，沒有比我在這里提到的更進一步的調整： http://jsfiddle.net/jESsA/38/ 。

這適用於所有體面的瀏覽器，甚至適用於 IE8/9，但不適用於 IE6/7。 解決這個問題的技術應該在 IE6/7 中起作用：在a上，設置display以block並將line-height從0更改為78px （我不完全清楚為什么80px使它向下移動一個像素，但確實如此；如果我想了足夠長的時間，我可能會弄清楚為什么），並將vertical-align: middle移到img孩子。 最終結果： http://jsfiddle.net/jESsA/44/

Answer 2

您可以嘗試在img標簽上分配一個vertical-align屬性。 垂直對齊是相對於行框的，這意味着您需要將行框設置為與a標簽的高度一樣高。 因此，您的 CSS 標記中需要進行這些更改：

#outer_wrapper {
    overflow: hidden; /* required when you float everything inside it */
}

.wrapper {
    /* display: inline-block is not required */
    /* text-align: center is not required -- see below */
    float: left; /* float all wrappers left */
}

a {
    display: block; /* block display required to make width and height behave as expected */
    margin-left: 4px; /* shift the block to make it horizontally centered */
    margin-top: 9px; /* shift the block to make it vertically centered */
    text-align: center; /* center inline content horizontally */
    line-height: 80px; /* line height must be set for next item to work */
}

img {
    vertical-align: middle; /* presto */
}

演示在這里。

Answer 3

看看這個：

http://jsfiddle.net/jESsA/37/

基本上，您使用float: left將您的框內聯和背景圖像而不是img標簽。 因為您使用的是float ，所以您需要clear after 以取消對其他元素的浮動效果。

我將 DIV 標簽更改為 A 標簽，這樣您就可以在孔塊上有一個鏈接並保持簡單。 但是您可以將其保留為 DIV 標記並在其中放置一個 A 塊（或使用 JavaScript）

Answer 4

.wrapper {
  float: left;
}

http://jsfiddle.net/jESsA/3/

Answer 5

你可以看看這個： http://www.brunildo.org/test/img_center.html

Answer 6

可能這會幫助你

http://css.flepstudio.org/en/css-tutorials/centered-vertical-horizontal-align.html

它幫助了我:)