纵向对齐 html,html – 哪个神奇的CSS会导致文本与纵向对齐的区别？

我发现< 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;

}

text text

text text

text text text text

text text text text

text text text text text text

text text text text text text

对于上面的例子,比较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%);

}

text text

text text

text text text text

text text text text

text text text text text text

text text text text text text