分类: uniapp

uniapp中使用uView2：layout 中u-col的居中问题

[ 2024-02-27 20:59:59 | 作者: admin ]
字号: 大 | 中 | 小
方法一：u-col里放纯文本能居中，但是u--image 是绝对位置左对齐，直接放在u-col会失去高度，所以需要设置图片组件的display:block
<u-col span="6" textAlign="center" >
     <u--image class="face" :showLoading="true" :src="'/static/logo.png'" width="80px" height="80px" @click="click"></u--image>
</u-col>
<u-col span="3" textAlign="center">
     <view class="demo-layout bg-purple">纯文本居中</view>
</u-col>
<style>
.face{display:block; margin:0 auto;}
</style>

方法二：图片上层加一个view采用display:flex
<u-col span="6" >
     <view class="face-box">
             <u--image class="face" :showLoading="true" :src="'/static/logo.png'" width="80px" height="80px" @click="click"></u--image>
     </view>
</u-col>

<style>
.face{display:block; margin:0 auto;}
.face-box{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
</style>
[最后修改由 admin， 于 2024-02-27 21:11:45]
评论Feed 评论Feed: http://blog.xg98.com/feed.asp?q=comment&id=2958

这篇日志没有评论。

此日志不可发表评论。