CSS垂直对齐问题

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

输出是：

1. 为什么黑色的wrappers 没有垂直对齐？我该如何解决这个问题？
2. 图像在红色框中水平居中。我怎样才能使它们垂直居中？

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

Answer 1

注意它是对齐图像的基础。这与vertical-align有关；如果您在.wrapper 上使用vertical-align 的值而不是baseline，例如top、middle 或bottom，它会修复它。 （只有在 div 中添加一些文本时，它们之间的区别才会明显。）

然后，您希望将图像置于 80x80 点的中心。您可以在a 上使用display: table-cell 和vertical-align: middle 来做到这一点（并添加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 移动到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 */
}

Demo here.

Answer 3

看看这个：

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

基本上你使用float: left 将你的盒子放在内联和一个背景图片而不是一个img标签。因为你使用的是float，所以需要clear之后才能取消对其他元素的浮动效果。

我将 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

它帮助了我:)