为什么第一个内嵌块锚定在底部？ [复制]答案

【问题标题】：Why is this first in-line block anchored at the bottom? [duplicate]为什么第一个内嵌块锚定在底部？ [复制]
【发布时间】：2021-12-09 06:14:40
【问题描述】：

我有两个并排的块：#abc 和 #buttons（后者包含内嵌图像）。

我不明白为什么文本“abcd”会浮在黄色 div 的底部。

问题：为什么默认不在#wrapper的左上角？

旁注：如何在黄色div的顶部（垂直）或中间（垂直）设置此文本“abcd”？

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

【问题讨论】：

我不记得为什么它在底部（关于图像导致这里发生变化的一些东西），但如果你想要文本在顶部，只需使用vertical-align: top。目前没有接近投票，但我确信这是另一个问题的答案。
@TylerH 它不是真正的底部，而是基线，图像的基线是它的底部，因此所有内容都与其基线对齐

标签： html css display inline-styles

【解决方案1】：

默认情况下，如果您将属性设置为内联，它将具有vertical-align 属性作为baseline 它的默认行为

但如果你想让它中间对齐或顶部，你可以把它改成middle

查看此代码

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

您可以查看css trick了解更多详情

【讨论】：

默认是基线
是的，我会更新它
@TemaniAfif 代码 sn-p（几秒钟前更新）现在可以在中间对齐。奇怪的是，如果 only #abc 设置为 vertical-align: middle，那么 #abc 仍然停留在底部...为什么？要使其正常工作，#abc 和 #buttons 似乎都必须具有vertical-align: middle。为什么？
@Basj 阅读：stackoverflow.com/q/52634849/8620333

【解决方案2】：

这一定与display: inline 和display: inline-block 使元素的行为方式有关。我尽量避免display: inline（这是所有元素的默认行为，不需要指定）。同时，我猜display: inline-block 将元素缩小到尽可能小并将其向下推？我没有技术答案，但我有a solution on codepen。

这个解决方案使用flexbox，css 中的天赐之物。

【讨论】：