Why is this first in-line block anchored at the bottom?

Question

I have two blocks side by side: #abc and #buttons (the latter containing inline images).

I don't understand why the text "abcd" is floating on the bottom of the yellow div.

Question: Why isn't it, by default, on top left of #wrapper?

Side-remark: how to set this text "abcd" on top (vertically) or middle (vertically) of the yellow div?

* { margin: 0; padding: 0; }
#abc, #buttons { display: inline-block; }
#wrapper { background-color: yellow; }
ul li { display: inline; }

<div id="wrapper">
  <div id="abc">
  abcd
  </div>
  <div id="buttons">
    <ul>
      <li><a href="/1"><img src="https://via.placeholder.com/75x75"></a></li>
      <li><a href="/2"><img src="https://via.placeholder.com/75x75"></a></li>
      <li><a href="/3"><img src="https://via.placeholder.com/75x75"></a></li>
      <li><a href="/4"><img src="https://via.placeholder.com/75x75"></a></li>
    </ul>
  </div>
</div>

I can't remember off the top of my head why it's at the bottom (something about images causing a change here), but just use `vertical-align: top` if you want the text at the top. Out of close votes current but I'm sure this is answered by another question. — TylerH, Oct 22 '21 at 15:51
@TylerH it's not really the bottom but the baseline and the baseline of the image is its bottom so everything is aligned at their baseline — Temani Afif, Oct 22 '21 at 18:15

score 1 · Accepted Answer · edited Oct 23 '21 at 18:55

1

By default if you set attribute into inline it will have vertical-align attribute as baseline it default behavior

but if you want to make it middle align or top you can change it into middle

see this code

* { margin: 0; padding: 0; }
#abc, #buttons { display: inline-block; vertical-align: middle; }
#wrapper { background-color: yellow; }
ul li { display: inline; }

<div id="wrapper">
  <div id="abc">
  abcd
  </div>
  <div id="buttons">
    <ul>
      <li><a href="/1"><img src="https://via.placeholder.com/50x50"></a></li>
      <li><a href="/2"><img src="https://via.placeholder.com/50x50"></a></li>
      <li><a href="/3"><img src="https://via.placeholder.com/50x50"></a></li>
      <li><a href="/4"><img src="https://via.placeholder.com/50x50"></a></li>
    </ul>
  </div>
</div>

you can see css trick for more detail

edited Oct 23 '21 at 18:55

Basj

41,386
99
383
673

answered Oct 22 '21 at 15:52

huntz rahmadi

116
2
11

1

the default is baseline – Temani Afif Oct 22 '21 at 18:14
yea you right i will update it – huntz rahmadi Oct 23 '21 at 00:04
@TemaniAfif The code snippet (updated a few seconds ago) now works to align in the middle. Strangely, if *only* `#abc` is set to `vertical-align: middle`, then `#abc` still stays on bottom... Why? For it to work, it seems it is mandatory that both #abc *and* #buttons have `vertical-align: middle`. Why? – Basj Oct 23 '21 at 18:56
1

@Basj read this: https://stackoverflow.com/q/52634849/8620333 – Temani Afif Oct 23 '21 at 19:09

Why is this first in-line block anchored at the bottom?

1 Answers1