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)
blank

相关推荐

  • java中高级工程师面试汇总

    java中高级工程师面试汇总1接口服务数据被劫包如何防止数据恶意提交1.1:防篡改客户端提交请求之前,先对自己请求的参数全部进行拼接加密得到一个加密字符串sign 请求参数加上sign,然后再发送给服务器 服务器将参数获取后也进行相同的拼接加密得到自己的sign 比较与客户端发来的sign是否相同 不相同则是被第三方修改过的,拒绝执行关键:第三方不知道加密方式和请求参数拼接规则,而客户端与服务器是知道的,因此第三方不知道修改参数后如何生成与服务器生成相同的sign 只要请求修改了一点点加密得到的就是不同的签名

  • 支持向量机的基本思想和原理_人民战争思想的基本理论内容

    支持向量机的基本思想和原理_人民战争思想的基本理论内容一、支持向量机:SVM即支持向量机(SupportVectorMachine),是有监督学习算法的一种,用于解决数据挖掘或模式识别领域中数据分类问题。二、基本原理:SVM算法即寻找一个分类器使得超平面和最近的数据点之间的分类边缘(超平面和最近的数据点之间的间隔被称为分类边缘)最大,对于SVM算法通常认为分类边缘越大,平面越优,通常定义具有“最大间隔”的决策面就是S…

    2022年10月20日
  • ai的文件怎样将里面的文字转曲_PDF文件置入AI缺少字体

    ai的文件怎样将里面的文字转曲_PDF文件置入AI缺少字体AI文件中文字转曲是什么?怎么转曲?转曲百度百科

  • 生命游戏程序_生命游戏怎么玩

    生命游戏程序_生命游戏怎么玩引言群居性昆虫是一个生命,鱼群、鸟群是一个生命,社会、城市是一个有机体,人类的语言是活的,人类的集体行为也是活的。这些复杂系统是如何设计出来的?世界上最著名的游戏之一,GameofLife生命游戏,为这些最神秘的问题提出了可能的解释——也许再复杂的生命,最初也不过是几条最简单的规则。本文从GameofLife的缘起说起,解释了它这几十年给予数学、计算机、哲学的启发,最后把它作为P…

    2022年10月17日
  • rj45管脚定义_rj45接口定义,rj45插座引脚定义

    RJ45是布线系统中信息插座(即通信引出端)连接器的一种,连接器由插头(接头、水晶头)和插座(模块)组成,插头有8个凹槽和8个触点。RJ是RegisteredJack的缩写,意思是“注册的插座”。在FCC(美国联邦通信委员会标准和规章)中RJ是描述公用电信网络的接口,计算机网络的RJ45是标准8位模块化接口的俗称。rj45插座引脚定义:常见的RJ45接口有两类:用于以太网网卡、路由器以太网接口等…

  • idea2021.11.3激活码(JetBrains全家桶)

    (idea2021.11.3激活码)这是一篇idea技术相关文章,由全栈君为大家提供,主要知识点是关于2021JetBrains全家桶永久激活码的内容https://javaforall.cn/100143.htmlIntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,上面是详细链接哦~1HV55HYOZP-eyJsaWNlb…

发表回复

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

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