为什么图像与 div 的底部对齐？答案

【问题标题】：Why images are aligned to the bottom of a div?为什么图像与 div 的底部对齐？
【发布时间】：2015-07-14 04:18:42
【问题描述】：

在以下示例中，图像与父容器的底部对齐：

HTML：

<div>
  <img src="https://www.google.com/images/srpr/logo11w.png">
  <div>A B C D E F G H I J K L M N O P Q R S T U V W X Y Z</div>
</div>

CSS：

img{
    height: 2em;
    top: 0px;
}

div div {
    width: 5em;
    display: inline-block;
}

可以参考这个JSFiddle：https://jsfiddle.net/9nLyr6f6/2/

我只是想知道这样做的逻辑是什么？适用什么规则？
如何更改它并让图像位于顶部？

【问题讨论】：

标签： html layout alignment

【解决方案1】：

因为内联元素的默认垂直对齐方式是基线。

见https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align

要更改它，请将图像上的垂直对齐属性设置为默认值以外的其他值。

img{
    height: 2em;
    top: 0px;
    vertical-align:top;
}

div div {
    width: 5em;
    display: inline-block;
}

<div>
  <img src="https://www.google.com/images/srpr/logo11w.png">
  <div>A B C D E F G H I J K L M N O P Q R S T U V W X Y Z</div>
</div>

【讨论】：

【解决方案2】：

图像和内部 div 都是inline-block 元素，它们在文本的基线上对齐。所以外部 div 实际上包含一行“文本”。此行不包含实际文本，而仅包含两个块：图像和内部 div。两者都在基线上对齐。

您可以看到这一点，特别是如果您添加一些文本和边框。图像与文本的基线对齐。

img{
    height: 2em;
    top: 0px;
    border: 1px solid green;
}

div {
    border: 1px solid blue;
}
div div {
    width: 5em;
    display: inline-block;
    border-width: 0px;
}

<div>
  A
  <img src="https://www.google.com/images/srpr/logo11w.png">
  B
  <div>A B C D E F G H I J K L M N O P Q R S T U V W X Y Z</div>
  Cxyz
</div>

您可以通过在图像中添加vertical-align: top 来解决此问题：

img{
    height: 2em;
    top: 0px;
    vertical-align: top;
}

div div {
    width: 5em;
    display: inline-block;
}

<div>
  <img src="https://www.google.com/images/srpr/logo11w.png">
  <div>A B C D E F G H I J K L M N O P Q R S T U V W X Y Z</div>
</div>

【讨论】：