uview-ui使用u-row+u-avatar居中布局

1、效果图

2、页面代码

<template><view><u-row :customStyle="{'margin': '10px 10px 10px 10px','borderRadius': '10px','background':'white'}"><u-col v-for="(str,i) in txt" :key="i" span="3"><view class="align-center"><u-avatar :text="str.substring(0,1)" fontSize="24" size="50" randomBgColor></u-avatar></view><view class="align-center" style="font-size: 14px;color: gray;">{{str}}</view></u-col></u-row></view>
</template><script>export default {data() {return {txt: ['景点', '酒店', '攻略', '视频']}},methods: {}}
</script><style lang="scss">.align-center {display: flex;justify-content: center;align-items: center;}
</style>