我发现里面的文字<button>是自动垂直居中的,而里面的文字<div>是顶部对齐的.
我试图找出哪个CSS规则有所不同但失败了.
div,
button {
width: 4em;
height: 4em;
background-color: red;
padding: 0;
border: 0;
margin: 1em;
font-size: 1em;
font-family: Arial;
}
div {
text-align: center;
display: inline-block;
cursor: default;
box-sizing: border-box;
}Run Code Online (Sandbox Code Playgroud)
<div>text text</div>
<button>text text</button>
<div>text text text text</div>
<button>text text text text</button>
<div>text text text text text text</div>
<button>text text text text text text</button>Run Code Online (Sandbox Code Playgroud)
至于上面的例子,比较Chrome中的所有计算CSS规则,我只能找到一个不同的对 - align-items: stretchfor <div>while align-items: flex-startfor <button>.
但分配align-items: flex-start并没有帮助.所以我完全糊涂了.
令我感到困惑的是,文本 - …