view组件居中

在使用Flex布局时遇到搜索框无法居中的问题,通过调整布局并使用margin属性成功实现居中效果。文章分享了具体实现过程及代码示例。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

  刚刚在写收藏界面的搜索框时,发现利用flex布局里面的justify-content: center;怎么也不能做到居中的效果。好一阵郁闷。
后来利用margin:0 auto;顺利解决。

效果图如下:

view代码:

  <view class='search'>
    <input type='text' placeholder='输入你想查找的内容' confirm-type='search' value="{{inputValue}}" bindinput='inputBind' bindconfirm='query'></input>
    <image src='/images/icon/ic_search.png' bindtap='query'></image>
  </view>

wxss:

/* 搜索框样式 */
.search {
  margin: 0 auto;
  width: 95%;
  height: 60rpx;
  background-color: white;
  margin-top: 2%;
  border: 1rpx solid white;
  border-radius: 10rpx;
}

但特别要注意的是:
这种用的时候一定要删掉flex布局,不然还是会没有效果的。
(由于没有删掉flex布局,纠结好久才改掉这个错误。。。真的是要被自己蠢哭了哈哈哈)

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值