微信小程序 align-items: center 失效

最新推荐文章于 2023-02-18 12:45:51 发布
最新推荐文章于 2023-02-18 12:45:51 发布
阅读量2k 收藏
点赞数 1
分类专栏： bug 文章标签： 小程序
原文链接：https://developers.weixin.qq.com/community/develop/doc/000a82a76f81e863829786cf65b400
版权

微信小程序不能垂直居中对齐

问题：
在这里插入图片描述
想要的效果：
在这里插入图片描述
解决方案
我真的是服了这个小程序，害的我弄了半天
在这里插入图片描述

解决方案来自下面文章：
align-items:center 不起作用

kangkang_95
关注
专栏目录
微信html兼容性问题,解决UC浏览器、微信浏览器使用display:flex;的兼容性问题
weixin_36204727的博客
06-09 540
在android平台的uc浏览器和微信浏览器中使用display: flex;会出问题。使用display: flex;的时候需要加上display: -webkit-box;使用flex: 1;的时候要加上:-webkit-box-flex: 1;-moz-box-flex: 1;-ms-flex: 1;使用align-items: center;的时候需要加上：-webkit-box-alig...
【快应用】align-self属性设置不生效案例
华为开发者联盟
11-09 846
华为ide中在text和image组件的style标签中使用align-self 属性，出现报错提示，'' does not support 'align-self' style和'' does not support 'align-self' style，该如何解决？这个是华为与联盟ide的一个差异导致的，实际华为是支持这个属性的，只是不能写在style标签中，需要写在class伪类里才是可以的。欲了解更多更全技术文章，欢迎访问。
【已解决】align-items：center失效，无法垂直居中问题！
蹦极的考拉
09-25 4489
解决方案，注意将父元素设置高度，还有如果是单独页面，设置高度为100vh。如果你的父元素没有高度，那么子元素不会垂直居中问题。
小程序flex布局align-items属性失效原因
Audrey___的博客
05-26 3635
flex布局学习资料 阮一峰flex布局 布局文章 问题 开发小程序时，采用flex布局，使用align-items属性时失效，元素无法基线对齐 star不对齐，箭头不对齐 代码 wxss代码，align-items属性值无效 wxml代码 这里有赞的Vant weapp的cell有个居中属性 也是写的flex的align-items属性。显然也是无效。 原因 多方排查，是van-cell内部嵌套了太多view导致居中失效。 改正一 将title插槽内部的view标签全部改为不需渲染的block标签
小程序中align-items: center竖直方向居中失败解决办法
Z_hongli的博客
11-12 2998
垂直居中失败现象 可以看到我在CSS中设置了水平和垂直居中，但是显示出来并没有效果 CSS中代码 .Nav_text{ display: flex; align-items: center; justify-content: center; } 原因/解决办法 原因其实很简单，因为我这个文本是单独设置的，但是他没有设置高度，自然也就没法居中，现在我把它的高度大小设置同它的父容器一样高就行了 CSS .Nav_text{ height: 100rpx; display: flex;
关于scroll-viwe使用align-items:center的问题
qq_51558433的博客
12-08 416
今天遇到了一个很奇怪的问题，找了好久终于找出来问题了在使用scroll-view组件的时候，给组件设置flex布局，但是B往上移动，明显看到内容被覆盖了
微信小程序CSS布局—display:flex
Danown的博客
10-13 4157
display:flex 是一种布局方式。它即可以应用于容器中，也可以应用于行内元素。 设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。 flex的六种属性 flex-direction 容器内元素的排列方向(默认横向排列) flex-direction:row 沿水平主轴让元素从左向右排列 flex-direction:column 让元素沿垂直主轴从上到下垂直排列 flex-direction:row-reverse 沿水平主轴让元素从右.
原生微信小程序开发-黑马优购（一）
peng109的博客
03-14 3131
接口文档地址： 轮播图--ShowDoc 视频地址： 黑马程序员微信小程序开发前端教程_零基础玩转微信小程序_哔哩哔哩_bilibili vs快捷键 wx-app wx-page 通过样式方式引入字体图标 微信小程序中不支持通配符“ * ” 页面初始化 主体颜色定义成变量 微信小程序单行注释没有用 单行注释没有用（//） 要 用多行注释（/* */） 写less文件，变成wxss文件？ 发送请求 ，要么记得把勾去掉，要么去开启请求合法域名 引入的路径要写...
解决微信小程序Vant-Weapp SwipeCell滑动单元格按钮无样式、点击空白处自动关闭、报渲染层错误等常见问题
Mr_Yang98的博客
07-15 3214
解决微信小程序Vant-Weapp SwipeCell滑动单元格按钮无样式、点击空白处自动关闭、报渲染层错误等常见问题
微信小程序-视图容器view
A321（timer2007）的技术小屋
02-10 471
欢迎大家关注我的个人微信订阅号 A321之旅。 目录view嵌入子view横向布局文字空格条件显示查看示例代码 视图容器，倘若进行分开理解，视图就是希望用户所看到的，而容器则是指可以包容其他的功能组件，从整个页面的角度理解为占位符，而从所包含的功能组件的角度理解为框架。个人理解，此为所有组件中最重要的一个。 视图容器中最基本的，最常用的是 view，可以实现对整个页面的划分，实现页面布局的控制，...
解决 flex align-items：center 无法居中（微信小程序）
weixin_42371145的博客
07-16 1万+
转自：https://www.cnblogs.com/zzd0916/p/7218451.html 进击的小牛牛 因为最近再做小程序，需要用到flex布局，因为写惯了web项目，初次学习确实感弹性布局的强大（关键是不用再管可恶的ie了）。 但是也遇到了align-items：center无法居中的问题，想了很久终于找到了解决办法。 解决方法： 1.确定好自己的主轴方向是不是row，如果是co...
微信小程序入门教程之二：页面样式
weixin_51341611的博客
02-18 2962
一、总体样式 二、Flex 布局 三、WeUI 四、加入图片 五、图片轮播
小程序笔记—一文弄懂align-items与align-content的区别（实操）
WeiHan_Seven的博客
01-19 3601
flex布局是小程序的主流布局之一，在写布局的时候总是无法避免align-items与align-content这两个属性，除了知道它们是控制交叉轴的对齐方式，但究竟什么时候用哪个，只能这个不行，就换那个，今天就来搞明白他们的异同。
微信小程序day02_03之 justify-content对齐方式控制
Java持续实践
03-09 2578
使用justify-content 可以对元素的对齐方式进行控制 首先把size进行修改 .size { width: 110rpx; height: 150rpx; } 在. container 中进行样式的修改 justify-content: flex-start 效果如下 , 默认为左对齐 justify-content: flex-end 右对齐 justify-co...
微信小程序文字水平垂直居中对齐问题（完美解决方案）
热门推荐
小猪佩奇工作室
05-22 9万+
我们知道常用的居中对齐方式有很多种例如：text-align:center; align-items:center; justify-content: center; margin: auto; #子容器在父容器中居中 但是在view中的文字对齐却不能简单的使用text-align: center;来实现，这种办法只能实现文字的水平居中，要实现水平垂直居中可使用如下方案.td { displ...
微信小程序 align-items:center
易天海
04-08 5758
.w-balance-area { display:flex; padding:20rpx; align-items:center; } 去掉align-items:center的效果 .reward .reward-head{ display: flex; padding:30rpx; } .reward .reward-head .detail-text{ flex...
微信小程序垂直横向居中对齐布局
dl6655的专栏
02-15 5723
微信小程序垂直居中对齐布局，HbuilderX,VUE,css
解决 flex align-items：center 无法居中（微信小程序）
weixin_30740581的博客
07-21 962
因为最近再做小程序，需要用到flex布局，因为写惯了web项目，初次学习确实感弹性布局的强大（关键是不用再管可恶的ie了）。 但是也遇到了align-items：center无法居中的问题，想了很久终于找到了解决办法。 解决方法： 　　1.确定好自己的主轴方向是不是row，如果是column，那么恭喜你，align-items:center是不起效果的，这时候你可以试试justify-con...
taro 微信小程序 flex-basis： 0px 失效
最新发布
08-01
Taro是一个用于快速开发跨平台应用的框架，包括微信小程序、H5等。`flex-basis` 是 Flexbox 模式下的主轴基础尺寸属性，它规定了项目在主轴方向上占据的基础大小。 如果在 Taro 的微信小程序中，设置 `flex-basis: 0px` 似乎失效，这可能是由于以下几个原因： 1. **默认值**：微信小程序的 Flexbox 实现可能不是完全一致，它可能会有自身的默认值。`0px` 可能被视为 `auto` 或者最小宽度，因此没有起作用。 2. **CSS 层级**：检查一下是否有其他样式覆盖了这个属性，或者看看是不是在某些特定条件下才不起作用。 3. **兼容性限制**：微信小程序对 CSS 的支持可能存在一些局限，特别是在早期版本中，对于一些 Flexbox 特性可能不完全支持。 4. **组件限制**：若你在自定义组件内部设置了 `flex-basis: 0px`，需确认该组件是否正确处理了 Flexbox 规则。 要解决这个问题，你可以尝试以下步骤： - 确认其他相关的 Flexbox 属性是否正常工作。 - 使用开发者工具查看元素的实际样式，看是否有意外的样式冲突。 - 如果有必要，可以考虑使用 `width: 0` 和 `flex-shrink: 0` 来模拟类似的效果，因为这些属性通常在微信小程序中更好工作。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值