css设置按钮竖直方向居中_button内flex垂直居中竟然不居中的解决「建议收藏」

css设置按钮竖直方向居中_button内flex垂直居中竟然不居中的解决「建议收藏」问题描述按钮样式为图标+文字,在使用flex布局写垂直居中时,iphone7手机上文字和图标却没有居中,居左显示。代码如下(已精简):{{confirmButtonText}}…button{display:flex;align-items:center;justify-content:center;img{width:36px;height:36px;display:…

大家好,又见面了,我是你们的朋友全栈君。

问题描述

按钮样式为图标+文字,在使用flex布局写垂直居中时,iphone7手机上文字和图标却没有居中,居左显示。代码如下(已精简):

css设置按钮竖直方向居中_button内flex垂直居中竟然不居中的解决「建议收藏」

{
{ confirmButtonText }}

button {

display: flex;

align-items: center;

justify-content: center;

img {

width: 36px;

height: 36px;

display: inline-block;

}

}

预期样式:

css设置按钮竖直方向居中_button内flex垂直居中竟然不居中的解决「建议收藏」

实际样式:

css设置按钮竖直方向居中_button内flex垂直居中竟然不居中的解决「建议收藏」

解决方式

给icon和文字外再包一层标签,给外层标签设置flex垂直居中样式,代码如下:

css设置按钮竖直方向居中_button内flex垂直居中竟然不居中的解决「建议收藏」

{
{ confirmButtonText }}

button {

display: flex;

align-items: center;

justify-content: center;

.wrap {

img {

width: 36px;

height: 36px;

display: inline-block;

}

}

}

到此这篇关于button内flex垂直居中竟然不居中的解决的文章就介绍到这了,更多相关button内flex垂直居中不居中内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/131567.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • webstrom格式化代码和常用的快捷键[通俗易懂]

    webstrom格式化代码和常用的快捷键[通俗易懂]在使用webstorm的时候,需要用到一些快捷键。 今天我就遇到以一个问题,就是我用java生成的html文档是不规范的,但是我需要将文档规范化排查一些问题。 1、打开webstrom。 2、File->Setting 3、搜索keyMap,进入keyMap设置页面,选择Eclipse方式。  如下图所示:           

  • 智能算法学习总结

    智能算法学习总结本科的时候学习了智能信息处理这门课程,所使用的教材是《计算智能》张军,詹志辉.计算智能[M].清华大学出版社,2009.11之前回忆了一下一些还有点记忆的算法,写了一点博客如下:1、神经网络的基础知识与简单分类编程https://blog.csdn.net/SweeNeil/article/details/865313842、模糊逻辑基本原理与编程https://…

  • 断点续传

    断点续传断点续传

  • 2022 idea激活码(注册激活)

    (2022 idea激活码)JetBrains旗下有多款编译器工具(如:IntelliJ、WebStorm、PyCharm等)在各编程领域几乎都占据了垄断地位。建立在开源IntelliJ平台之上,过去15年以来,JetBrains一直在不断发展和完善这个平台。这个平台可以针对您的开发工作流进行微调并且能够提供…

  • pytest重试_联系人去重失败

    pytest重试_联系人去重失败安装:pip3installpytest-rerunfailures重新运行所有失败用例要重新运行所有测试失败的用例,请使用–reruns命令行选项,并指定要运行测试的最大次数:$py

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号