Question

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

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/

我只是想知道它的逻辑是什么？什么规则适用？
如何更改它并将图像放在顶部？

Answer 1

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

请参阅https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align

要更改它，请将图像上的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>

Answer 2

图像和内部div都是inline-block元素，它们在文本的基线上对齐。所以外部div实际上包含一行'text'。此行不包含实际文本，但只包含两个块：图像和内部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>

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

2 个答案: