button内flex垂直居中不居中怎么解决
本篇内容介绍了“button内flex垂直居中不居中怎么解决”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!
创新互联建站专业为企业提供南山网站建设、南山做网站、南山网站设计、南山网站制作等企业网站建设、网页设计与制作、南山企业网站模板建站服务,十多年南山做网站经验,不只是建网站,更提供有价值的思路和整体网络服务。
问题描述
按钮样式为图标+文字,在使用flex布局写垂直居中时,iphone7手机上文字和图标却没有居中,居左显示。代码如下(已精简):
... button { display: flex; align-items: center; justify-content: center; img { width: 36px; height: 36px; display: inline-block; } }
预期样式:
实际样式:
解决方式
给icon和文字外再包一层标签,给外层标签设置flex垂直居中样式,代码如下:
... button { display: flex; align-items: center; justify-content: center; .wrap { img { width: 36px; height: 36px; display: inline-block; } } }
“button内flex垂直居中不居中怎么解决”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注创新互联网站,小编将为大家输出更多高质量的实用文章!
本文名称:button内flex垂直居中不居中怎么解决
标题URL:http://myzitong.com/article/gdspes.html