小程序中align-items: center竖直方向居中失败解决办法

最新推荐文章于 2024-07-18 15:49:58 发布
最新推荐文章于 2024-07-18 15:49:58 发布
阅读量2.9k 收藏 3
点赞数 1
分类专栏： 微信小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/z_hongli/article/details/121289726
版权

CSS 垂直居中 flex布局 高度设置 文本元素
关键词由CSDN通过智能技术生成

垂直居中失败现象

可以看到我在CSS中设置了水平和垂直居中，但是显示出来并没有效果
在这里插入图片描述
CSS中代码

.Nav_text{
  display: flex;
  align-items: center;
  justify-content: center;
}

原因/解决办法

原因其实很简单，因为我这个文本是单独设置的，但是他没有设置高度，自然也就没法居中，现在我把它的高度大小设置同它的父容器一样高就行了
在这里插入图片描述
CSS

.Nav_text{
  height: 100rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

这样就能够解决完美居中的问题了！

Z_hongli
关注
专栏目录
微信小程序 align-items:center
易天海
04-08 5735
.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...
display: flex text-align align-items justify-content 居中测试过程
morning1216的博客
07-12 2083
display: flex text-align align-items justify-content 居中测试过程 刚刚接触HTML CSS，想记录一下我自学中遇到的很小白的问题。 此次练习的目的是将下图中2222水平竖直居中在浅灰色方块中。 遇到的问题是使用display: flex之后，text-align居中失效。使用了align-items justify-content之后虽然效果达到了，但是很好奇为什么text-align居中失效，经过几次测试，本小白大概搞懂了。我个人来说，各种概念看过之后
【已解决】align-items：center失效，无法垂直居中问题！
蹦极的考拉
09-25 4363
解决方案，注意将父元素设置高度，还有如果是单独页面，设置高度为100vh。如果你的父元素没有高度，那么子元素不会垂直居中问题。
浅谈Vue：text-align: center、align-items: center、justify-content: center三种居中的区别和用法
最新发布
刘一帆的博客
07-18 592
使用来水平居中块级元素内的文本或行内元素。使用来垂直居中Flex容器内的子元素。使用来水平居中Flex或Grid容器内的子元素。选择合适的属性取决于你的布局模型和元素类型。
小程序flex布局align-items属性失效原因
Audrey___的博客
05-26 3592
flex布局学习资料 阮一峰flex布局 布局文章 问题 开发小程序时，采用flex布局，使用align-items属性时失效，元素无法基线对齐 star不对齐，箭头不对齐 代码 wxss代码，align-items属性值无效 wxml代码 这里有赞的Vant weapp的cell有个居中属性 也是写的flex的align-items属性。显然也是无效。 原因 多方排查，是van-cell内部嵌套了太多view导致居中失效。 改正一 将title插槽内部的view标签全部改为不需渲染的block标签
解决 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...
css align-items: center 垂直居中不生效
lonvik的博客
01-09 1206
遇到这个问题，你可能想实现这样的样式！！ 垂直居中不生效，换个思路就行啦 display: flex; justify-content: center;
display: flex;justify-content: center;background-color: white;可否让其竖直也居中
05-28
可以的，可以添加 `align-items: center;` 属性来让元素在竖直方向居中对齐，如下所示： ``` display: flex; justify-content: center; align-items: center; background-color: white; ```
.container { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; height: 100vh;}.box { position: relative; width: 100px; height: 100px; margin: 20px; background-color: #fff; box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);}.box::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 50px; height: 50px; border: 1px solid #ccc; border-radius: 50%;}
05-05
其中，.container是一个类名，表示一个容器，设定了一些样式，如flex布局、折行、水平和竖直居中对齐、高度为窗口高度这是CSS代码，用来控制网页中的元素的样式和排版。其中，.container是一个类名，表示一个容器，...
CSS中垂直居中的七种方法
m0_48982503的博客
10-08 5118
前言： 我们在编辑一个版面，通常都会用到水平居中和垂直居中来设计，而水平居中很好处理，不外乎就是设定margin:0 auto；或是text-align:center；，就可以轻松解决掉水平居中的问题，但一直以来最麻烦对齐问题，都是“垂直居中”这个讨人厌的设定，以下将介绍七种单纯利用CSS垂直居中的方式。 七种垂直居中的方法： 设定行高（line-height） 添加伪元素 calc动态计算 使用表格或假装表格 transform 绝对定位 使用Flexbox 设定行高（line-hei.
CSS 常见布局 水平垂直居中对齐
OriginalMIxss的博客
07-24 1916
一 水平居中 1 行内元素水平居中 行内元素一般是文本，图标等，text-align可以控制其相对于父元素水平居中对齐 #parent{ text-align: center; } 2 margin 自动水平居中 单个块级元素，可以使用margin auto可自动左右对齐，不过要首先设定宽度 #son{ width: 100px; /*必须定宽*/ margin: 0 auto; } 另外还可以通过设置父子宽度，使用具体的margin绝对定位对齐 3 块级改行内块级水平居中 多个
解决小程序button: text-align: center；不生效的问题
吕氏春秋i
03-07 1440
在写小程序 无论如何都居中不了button的文字百思不得其解 其实只需要把button设置为display: flex;再配合垂直居中和水平居中就可以实现。
小程序 scroll-view flex布局下align-items和gap无效
weixin_44240581的博客
10-27 1277
小程序 scroll-view flex布局下align-items无效。
display:flex align-items:center无效的不一样的解决思路
菜鸟博客
05-14 597
写H5的时候，希望两个元素在div中垂直居中，但是设置align-items:center无效，通过Chrome的检查功能发现引入的三方css库对input标签设置了。
text-align:center 实现文字居中对齐与 align-items:center 实现div内所有标签对齐
XyuanL的博客
05-12 8052
初始化样式： <style> div{ border:solid 1px red; margin-top: 5px; } span{ border:solid 1px blue; } </style> ...
解决align-items：center失效，无法垂直居中问题
w1753034677的博客
03-01 4016
#main{ display: flex; justify-content: center; align-items: center; } 这是因为main缺少高度，100%的高度是不起作用的，最好使用100vh来设置，这样就可以解决这个问题了 ...
小程序input内容真机不居中问题
ranshaofan的博客
12-12 1677
小程序input真机不居中问题 问题：在开发工具中input标签内容居中，真机却未居中。 解决方法： input标签的css不使用display flex局部，而是换成text-align:center; input标签上加 type=‘text’ style='text-align:center’ ...
IE 11 Flex align-items: center垂直不居中
一叶君
05-09 5029
1. 不居中 css代码： .flex-container{ min-height:100px; display:flex; align-items:center; } 2. 居中 Css代码： .flex-container{ min-height:100px; display:flex; align-items:center; } .fl...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值