Question

这可能是一个非常简单的问题，但我一直无法找到答案......

我有5张图片，第一张是200 x 100像素，另外四张是50 x 50像素。我正在尝试使用vertical-align: middle集中对齐它们，但它没有按预期工作。

这是我的HTML：

        <header>
            <div id="sm_icons">
                <img src="imgs/logo.png" alt="Site Logo" />
                <img class="sm_img" src="icons/aquaicons/Email.png" alt="Link to Home page">
                <img class="sm_img" src="icons/aquaicons/Aquicon-Facebook.png" alt="Link to Facebook page">
                <img class="sm_img" src="icons/aquaicons/Aquicon-GooglePlus.png" alt="Link to Google+ page">
                <img class="sm_img" src="icons/aquaicons/Aquicon-Twitter.png" alt="Link to Twitter page">
            </div>
        </header>

我使用以下CSS成功地垂直对齐图像：

.sm_img {
position: relative;
height: 50px;
width: 50px;
left: 400px;
}

#sm_icons > img{
vertical-align: middle;
}

我的问题是，为什么以下内容不能替代上述内容？

.sm_img {
position: relative;
height: 50px;
width: 50px;
left: 400px;
vertical-align: middle;
}

vertical-align: middle不应将四个图像放在父元素的中间，在这种情况下是#sm_icons吗？

Answer 1

vertical-align不会垂直居中block级元素中的元素，这是您尝试做的事情（看起来似乎）。

令人困惑，因为属性名为 vertical-align ，但它在inline或行（？）级别运行。看看这个fiddle for an example。

您所追求的是将block级元素（img）垂直居中，而inline函数如inline-block see here）。

如果您不介意使用transform属性，可以使用几行代码轻松地垂直对齐任何元素。

.class {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

Answer 2

我简化了一些代码，以演示vertical-align属性如何影响内嵌图像。

在示例1中，vertical-align: middle应用于父块内的每个图像，包括左侧的大图像。在这种情况下，所有图像都垂直放置，使得每个图像的中间位于包含内容（图像）的线框的基线上。

在示例2中，vertical-align: middle仅适用于小图片，默认情况下，大图片使用vertical-align: baseline。在这种情况下，大图像的下边缘沿着线框的基线，较小的图像被定位，使得它们的垂直中点位于基线上。

您的两个CSS规则不相同。第一个影响所有图像，第二个影响小图像，因此产生两种不同的结果。

vertical-align属性控制内联元素相对于线框基线的定位方式。

但是，在表格单元格中（使用td或display: table-cell），vertical-align属性将为您提供最初预期的行为。有点误导的是，相同的属性名称有两种非常行为，具体取决于上下文，但这就是CSS规范的编写方式。

.sm_icons img {
  vertical-align: middle;
}

.sm_icons_v2 .sm_img {
  vertical-align: middle;
}

<b>Example 1</b><br>
<div class="sm_icons">
  <img src="http://placehold.it/200x100">
  <img class="sm_img" src="http://placehold.it/50x50">
  <img class="sm_img" src="http://placehold.it/50x50">
  <img class="sm_img" src="http://placehold.it/50x50">
  <img class="sm_img" src="http://placehold.it/50x50">
</div>
<br><br>
<b>Example 2</b><br>
<div class="sm_icons_v2">
  <img src="http://placehold.it/200x100">
  <img class="sm_img" src="http://placehold.it/50x50">
  <img class="sm_img" src="http://placehold.it/50x50">
  <img class="sm_img" src="http://placehold.it/50x50">
  <img class="sm_img" src="http://placehold.it/50x50">
</div>

CSS Vertical-align：中间不按预期工作

2 个答案: