我试图找出哪个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;
}

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

对于上面的例子,比较Chrome中所有计算的CSS规则,我只能找到一个不同的对 – 对齐项：对于÷而align-items：< button>的flex-start.

但是分配对齐项：flex-start没有帮助.所以我完全感到困惑

令我困惑的是,文本 – 垂直对齐在< div>之间是不同的和< button>即使您设置了所有具有相同值的CSS规则.换句话说,使用相同的CSS规则,< div>和< button>表现不同.为什么？

引擎盖下的魔法是什么？

我可以将< div&gt (下面的例子).我只是想知道什么导致文本 - 垂直对齐之间的区别. 也许它不是由特定的CSS规则引起的,但是因为两个元素的布局算法在浏览器中是不同的？

div,button {
  width: 4em;
  height: 4em;
  background-color: red;
  padding: 0;
  border: 0;
  margin: 1em;
  font-size: 1em;
  font-family: Arial;
}

div { /* basic CSS rules to button-fy  */
  text-align: center;
  display: inline-block;
  cursor: default;
  Box-sizing: border-Box;
}

/* Magic */
div,button {
  vertical-align: middle;
}

div span {
  display: inline-block;
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

<div><span>text text</span></div>
<button>text text</button>

<div><span>text text text text</span></div>
<button>text text text text</button>

<div><span>text text text text text text</span></div>
<button>text text text text text text</button>