All geek questions in one place

Why does vertical alignment apply to an image that also applies to sister text?

I installed vertical-alignonly on the image.

Thus, the text vertical-alignin the text should be the default vertical-align: baseline.

But why does the text move up, in the middle, below?

<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>
Run codeHide result

Code Pen Demonstration

+4
source share
4 answers

Let me break your code:

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

If you check the developer tools, you will find that the property vertical-alignworks as indicated for each element img.

But what is the computed value vertical-alignfor an anonymous inline field that wraps the text?

baseline. , , (source). , baseline, vertical-align .

, , , -, vertical-align (top, middle bottom), baseline, .

, , vertical-align .

, vertical-align . .

, , .

, . , .

div { line-height: 185px;}
<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>
Hide result

: 10.8 : line-height vertical-align

+2

, img . img, , , . , , img, , img.

. , , img , div :

https://jsfiddle.net/csazuk0u/

+3

, :

top:

bottom:

, " ", . div , , , .

, :

div {
  height: 150px;
}
<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>
Hide result

, , .

-1

When you set the vertical alignment on the image, this is the orientation relative to the block of text (or other inline element). I think your code "works as designed."

Here is an example that contains a lot of text and can better illustrate my point.

<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

Perhaps you have a question about how to achieve a specific layout with images and text with which we can help?

-1
source

Source: https://habr.com/ru/post/1650939/

More articles:


All Articles