大家好，又见面了，我是你们的朋友全栈君。
问题描述
按钮样式为图标+文字，在使用flex布局写垂直居中时，iphone7手机上文字和图标却没有居中，居左显示。代码如下(已精简)：
{
{ confirmButtonText }}
…
button {
display: flex;
align-items: center;
justify-content: center;
img {
width: 36px;
height: 36px;
display: inline-block;
}
}
预期样式：
实际样式：
解决方式
给icon和文字外再包一层标签，给外层标签设置flex垂直居中样式，代码如下：
{
{ confirmButtonText }}
…
button {
display: flex;
align-items: center;
justify-content: center;
.wrap {
img {
width: 36px;
height: 36px;
display: inline-block;
}
}
}
到此这篇关于button内flex垂直居中竟然不居中的解决的文章就介绍到这了,更多相关button内flex垂直居中不居中内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/131567.html原文链接：https://javaforall.net
![win10网页出现stack overflow at line 0的解决方法[通俗易懂]](https://javaforall.net/wp-content/uploads/2020/11/2020110817443450-480x300.jpg)
