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

它帮助了我:)