相关疑难解决方法(0)

哪个神奇的CSS会导致<button>和<div>之间text-vertical-align的区别?

我发现里面的文字<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并没有帮助.所以我完全糊涂了.

令我感到困惑的是,文本 - …

html css

16
推荐指数
2
解决办法
475
查看次数

标签 统计

css ×1

html ×1