按钮中的文字应位于中心位置,但使用网络浏览器显示在顶部,有什么不对?
button {
height: 100px;
}

<div class="container">
<button class="w-100 f-default-f btn btn-primary d-flex justify-content-between px-3">
<div>Text</div>
<div>icon</div>
</button>
</div>
&#13;
我使用代码:
添加了带有Boostrap 4 alpha的codepenhttps://codepen.io/anon/pen/PaqLNm
适用于Mozilla Firefox和Chrome,Microsoft Edge或Internet Explorer没有达到预期的效果。
答案 0 :(得分:1)
你正在使用flex,而flex只对IE11二重奏提供部分支持,以防止出现大量错误。
例如,使用content
确定弹性项目的大小时,IE 10-11始终采用flex-basis
框模型,即使该项设置为box-sizing: border-box
。
其他已知错误:
-IE 11要求将一个单位添加到第三个参数,flex-basis
属性(more info)
- 在IE10和IE11中,display: flex
和flex-direction: column
的容器无法正确计算其弯曲的儿童&#39;如果容器具有min-height
但没有明确的height
属性,则为size。
-IE 11在使用min-height
时未正确对齐项目
来源: https://github.com/philipwalton/flexbugs#7-flex-basis-doesnt-account-for-box-sizingborder-box https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis https://caniuse.com/#search=flex
答案 1 :(得分:1)
您只需要将align-items-center
类添加到button
元素,这会将子元素垂直对齐。
注意:在Edge,IE11,IE10浏览器上测试它可以正常使用此修复程序
检查演示here
HTML
<div class="container">
<button class="w-100 f-default-f btn btn-primary d-flex align-items-center justify-content-between px-3">
<div>Text</div>
<div>icon</div>
</button>
</div>
答案 2 :(得分:0)
您的某个CSS文件中是否有lineheight
属性?
尝试添加此值或对其进行处理,它会将您的文本与IE按钮对齐(当然也适用于Edge)。