我发现< 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; }
<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> (下面的例子).我只是想知道什么导致文本 - 垂直对齐之间的区别. 也许它不是由特定的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>
解决方法
由于您使用内嵌块,您需要使用vertical-align作为默认值为baseline:
魔术CSS:
vertical-align: middle;
以上将修复它:
div,button { width: 4em; height: 4em; background-color: red; padding: 0; border: 0; margin: 1em; font-size: 1em; font-family: Arial; vertical-align: middle; } div { text-align: center; display: inline-block; cursor: default; box-sizing: border-box; }
<div>text</div> <button>text</button>
并且对于div中的文本为中心,您需要使用line-height到div的高度.
魔术CSS:
line-height: 4em;
div,button { width: 4em; height: 4em; background-color: red; padding: 0; border: 0; margin: 1em; font-size: 1em; font-family: Arial; vertical-align: middle; line-height: 4em; } div { text-align: center; display: inline-block; cursor: default; box-sizing: border-box; }
<div>text</div> <button>text</button>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。