我发现< 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
对于上面的例子,比较Chrome中所有计算的CSS规则,我只能找到一个不同的对 – 对齐项:对于÷而align-items:< button>的flex-start.
但是分配对齐项:flex-start没有帮助.所以我完全感到困惑
令我困惑的是,文本 – 垂直对齐在< div>之间是不同的和< button>即使您设置了所有具有相同值的CSS规则.换句话说,使用相同的CSS规则,< div>和< 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 { /* 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