刚刚在写收藏界面的搜索框时,发现利用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布局,纠结好久才改掉这个错误。。。真的是要被自己蠢哭了哈哈哈)