Question

请考虑以下示例：（live demo here）

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;
}

输出结果为：

enter image description here

为什么黑色wrapper没有垂直对齐？我怎么能解决这个问题？
图像在红色框中水平居中。我怎么能垂直居中呢？

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

Answer 1

观察它是对齐的图像的基础。这与vertical-align有关;如果您使用vertical-align以外的.wrapper上的baseline值，例如top，middle或bottom，则会解决此问题。（如果你在div中加入一些文字，这些差异就会很明显。）

然后，您希望将图像置于80x80的中心位置。您可以使用display: table-cell上的vertical-align: middle和a执行此操作（并添加line-height: 0以解决更多问题）。然后，您可以在a标记，.wrapper中混合使用这些样式组，或者如果不需要，则可以放弃.wrapper（只需要它 - 如果它完全 - 如果你把文字放在里面。）

结果，没有比我在此处提到的进一步调整：http://jsfiddle.net/jESsA/38/。

这适用于所有体面的浏览器，甚至在IE8 / 9上，但它不适用于IE6 / 7。解决这个问题的技术应该适用于IE6 / 7：在a上，将display设置为block并将line-height从0更改为78px（我不完全清楚为什么80px让它向下移动一个像素，但它确实如此;如果我考虑的时间足够长，我可能会找出原因），并转移{vertical-align: middle 1}}到img孩子。最终结果：http://jsfiddle.net/jESsA/44/

Answer 2

您可以尝试在vertical-align标记上分配img属性。垂直对齐相对于线框，这意味着您需要将线框设置为与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 */
}

Demo here