view组件居中

最新推荐文章于 2024-11-02 20:00:59 发布

原创最新推荐文章于 2024-11-02 20:00:59 发布 · 1w 阅读

7 ·

CC 4.0 BY-SA版权

页面布局同时被 2 个专栏收录

20 篇文章

订阅专栏

微信小程序

12 篇文章

订阅专栏

在使用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;
}