Question

我只在图片上设置vertical-align。

因此，文本上的vertical-align应为默认vertical-align: baseline。

但为什么文字会移到顶部，中间，底部？

＆＃13;

<div style="background-color:#e5edff;">
  <img src="http://placehold.it/100x100" style="vertical-align:top;">aaa
</div>
<br>
<div style="background-color:#e5edff;">
  <img src="http://placehold.it/100x100" style="vertical-align:middle;">bbb
</div>
<br>
<div style="background-color:#e5edff;">
  <img src="http://placehold.it/100x100" style="vertical-align:bottom;">bbb
</div>

＆＃13;

The demo on code pen

Answer 1

这种情况正在发生，因为img是块中最大的项目。事实上img正在做你期望的事情。但是，因为该块与img的大小相同，所以文本看起来与img相关。

看看下面的小提琴。这显示当img不再是块中最大的项时会发生什么，只需将文本包装在具有显式高度的div中：

https://jsfiddle.net/csazuk0u/

Answer 2

让我们分解你的代码：

<div style="background-color:#e5edff;">
  <img src="http://placehold.it/100x100" style="vertical-align:top;">aaa
</div>

<br>

<div style="background-color:#e5edff;">
   <img src="http://placehold.it/100x100" style="vertical-align:middle;">bbb
</div>

<br>

<div style="background-color:#e5edff;">
   <img src="http://placehold.it/100x100" style="vertical-align:bottom;">bbb
</div>

如果您查看开发人员工具，则会发现vertical-align属性按照每个img元素的指示运行。

但是，包含文本的匿名内联框的计算vertical-align值是什么？

实际上baseline。匿名框继承父属性，当属性不可继承时，它们使用初始值（source）。在任何一种情况下，它都是baseline，并且图片的vertical-align未被应用。

因此，当您看到文字明显与图片vertical-align设置（top，middle或bottom）对齐时，文字实际上是计算的到了baseline，它变得奇怪而混乱。

实际发生的是图像上的vertical-align设置正在移动线框的基线。

由于图片已占据容器的整个高度，vertical-align无法移动它。没有额外的空间。

为了完成任务，即相对于线框的基线垂直对齐元素，基线必须移动。

要说明此行为，请为行框添加其他高度。然后基线将不会被强制移动，文本将按预期方式对齐。

＆＃13;

div { line-height: 185px;}

＆＃13;

<div style="background-color:#e5edff;">
  <img src="http://placehold.it/100x100" style="vertical-align:top;">aaa
</div>

<br>

<div style="background-color:#e5edff;">
   <img src="http://placehold.it/100x100" style="vertical-align:middle;">bbb
</div>

<br>

<div style="background-color:#e5edff;">
   <img src="http://placehold.it/100x100" style="vertical-align:bottom;">bbb
</div>

＆＃13;

更多详情：10.8 Line height calculations: the line-height and vertical-align properties

Answer 3

这绝对令人困惑，但与documentation：

一致

top：元素的顶部与最高的顶部对齐   行上的元素

bottom：元素的底部与最低元素对齐   在线

由于文本似乎是该行＆＃34;上最高和最低的＆＃34;元素，因此图像分别与文本的顶部和底部对齐。父div扩展为适合图像，因此看起来它是文本移动而不是图像。

通过将父高度设置为高于图像，可以更清楚地看到：

＆＃13;

div {
  height: 150px;
}

＆＃13;

<div style="background-color:#e5edff;"><img src="http://placehold.it/100x100" style="vertical-align:top;">aaa</div>
<br>
<div style="background-color:#e5edff;"><img src="http://placehold.it/100x100" style="vertical-align:middle;">bbb</div>
<br>
<div style="background-color:#e5edff;"><img src="http://placehold.it/100x100" style="vertical-align:bottom;">ccc</div>

＆＃13;

我们注意到图像相对于文本对齐，而不是相对于父对象。

Answer 4

在图像上设置垂直对齐时，它是相对于文本（或其他内联元素）块的方向。我认为您的代码＆＃34;按设计工作＆＃34;。

这是一个包含大量文字的例子，可能更能说明我的观点。

<div style="background-color:#e5edff;"><img src="http://placehold.it/100x100" style="vertical-align:top;">aaaLorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud
  exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto
  odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem
  insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam
  littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.

</div>
<br>
<div style="background-color:#e5edff;"><img src="http://placehold.it/100x100" style="vertical-align:middle;">bbLorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis
  nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan
  et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent
  claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est
  notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum. b

</div>
<br>
<div style="background-color:#e5edff;"><img src="http://placehold.it/100x100" style="vertical-align:bottom;">bbbLorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis
  nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan
  et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent
  claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est
  notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.

</div>

my CodePen example

也许您对如何使用我们可以提供帮助的图像和文字实现特定布局有疑问？

为什么垂直对齐应用于图像也适用于兄弟文本？

4 个答案: