微信小程序---view标签中内容居中

最新推荐文章于 2025-03-10 15:49:59 发布

漫长的~以后

最新推荐文章于 2025-03-10 15:49:59 发布

阅读量3.7w

点赞数 9

分类专栏：小程序文章标签：小程序

本文链接：https://blog.csdn.net/fuqiang0203/article/details/82429518

版权

小程序专栏收录该内容

7 篇文章

订阅专栏

本文介绍如何在WeUI框架中实现view内的文字和图片水平及垂直居中。通过wxml和wxss代码示例展示如何使用Flex布局来达到元素居中的效果。

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

在有些时候我们需要view里的内容水平居中,或者垂直居中,又或者水平垂直居中,
最近我就在项目中需要设置view内文字和图片 垂直居中
下面直接看代码:
wxml代码:

<view class="weui-tab__content_title" >

      <text style='padding-left: 17px;'>选项一的大标题</text>

      <image src="./navigator-images/u16.png" style=";padding-left: 55%; vertical-align: middle;width:10px; height: 15px;" ></image>

</view>

wxss:

.weui-tab__content_title{
    display: flex;    /*设置显示样式**/
    align-items: center;    /**子view垂直居中*/
    vertical-align: center; /**垂直居中*/
    justify-content: center; /**内容居中*/
    flex-direction:row; 子view排列方式row--水平 column--垂直

}