为什么第一个直列块锚定在底部?

Question

我有两个块并排:#abc和#buttons(后者包含内联图像)。

我不明白为什么文字"abcd"浮动在黄色div的底部。

问题:为什么默认情况下不在#wrapper的左上方?

边注:如何设置此文本"abcd"在黄色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>

Answer 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技巧的更多细节