css设置按钮竖直方向居中_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垂直居中不居中内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！

css设置按钮竖直方向居中_button内flex垂直居中竟然不居中的解决相关推荐

css设置按钮竖直方向居中_前端设计师必须知道的10个重要的CSS技巧
对于一个初入门的前端设计师,在设计修改网站前端的时候,我们需要编写一些CSS.JS的内容达到界面效果.今天分享10个对于前端设计师来说重要的CSS技巧,这也是我在给许多客户做网站的过程当中总结出来的. ...
css设置按钮竖直方向居中_如何借助伪元素实现垂直居中？
点击右上方红色按钮关注"小郑搞码事",每天都能学到知识,搞懂一个问题! 今天给大家讲一种实现垂直居中的方法:伪元素法(::before/::after) 一.vertical-al ...
css设置按钮竖直方向居中_css实现垂直居中6种方法
在一次次笔试,一次次的面试中,问到垂直居中的问题太多太多,但是我每一次回答,都好像都不能让面试官太满意,今天特意花点时间,整理一下css垂直居中问题. 1.如果是单行文本.看代码: Document ...
CSS | DIV 水平和竖直方向居中
1.竖直方向: 最近做个小页面遇到了点麻烦:需要设置元素的竖直方向居中. 以往的经验: display: inline-block; vertical-align: middle; 就可以解决.但是这 ...
CSS盒子模型和水平、竖直方向的布局
一.块元素.行内元素和行内块元素行内元素特征: (1)设置宽高无效 (2)对margin仅设置左右方向有效,上下无效:padding设置上下左右都有效,即会撑大空间 (3)不会自动进行换行块状元素 ...
对象水平对齐，并且按照竖直方向排列
;; ;;程序名称:对象水平对齐程序,并且按照竖直方向排列 ;;执行命令:tb2 ;;程序功能:将选定的对象左对齐,并且按照竖直方向排列. ;; (defun c:tb2(/ selobjs oldc ...
android 动画x轴旋转,Android Roate3dAnimation实现围绕y轴竖直方向或者绕x轴方向旋转的3d动画效果...
概要: ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Roate3dAnim ...
css设置按钮样式_使用CSS设置按钮样式的快速指南
css设置按钮样式 by Ashwini Sheshagiri 通过Ashwini Sheshagiri Buttons have become an inevitable part of front ...
小程序中align-items: center竖直方向居中失败解决办法
垂直居中失败现象可以看到我在CSS中设置了水平和垂直居中,但是显示出来并没有效果 CSS中代码 .Nav_text{display: flex;align-items: center;justify ...

css设置按钮竖直方向居中_button内flex垂直居中竟然不居中的解决

css设置按钮竖直方向居中_button内flex垂直居中竟然不居中的解决相关推荐

最新文章

热门文章