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

小鱼儿 2022-05-14 09:07 416阅读 0赞

在有些时候我们需要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--垂直
}

发表评论取消回复

表情：

评论列表（有 0 条评论，416人围观）

还没有评论，来说两句吧...

相关阅读

相关微信小程序标签

、view div和view都是盒模型，默认display:block。盒模型在布局过程中，一般推荐display:flex的写法，配合justify-conten...

朴灿烈づ我的快乐病毒、/ 2024年04月18日 18:29/ 0 赞/ 166 阅读

相关 view标签中内容居中

xml： <view class="_collet">收藏<image class="collet" src="{ {img_collet}}" bin

怼烎@/ 2023年07月19日 12:23/ 0 赞/ 98 阅读

相关微信小程序水平居中和垂直居中

配合使用当 display: flex 配合 justify-content: center 使用时可以让view水平居中水平居中 display:

「爱情、让人受尽委屈。」/ 2023年06月03日 02:53/ 0 赞/ 76 阅读

相关微信小程序scroll-view

<scroll-view scroll-y style="height: 100%;"> <view class="green" style="width:

分手后的思念是犯贱/ 2023年03月13日 03:29/ 0 赞/ 107 阅读

相关微信小程序中＜view＞标签与＜block＞标签的区别

两者的区别是，<view> 是一个组件，会在页面上做渲染；<block>不是一个组件，它仅仅是一个包装元素，只接受控制属性，不会在页面中做任何渲染。资料： [https:

迷南。/ 2023年01月20日 13:54/ 0 赞/ 61 阅读

相关微信小程序关于view的居中问题

.viewClass{ display: flex; justify-content: center; /水平/ align-i

阳光穿透心脏的1/2处/ 2022年12月31日 01:28/ 0 赞/ 466 阅读

相关微信小程序：文字居中沉底

核心代码  <view class="container"> <view class="usermott

忘是亡心i/ 2022年12月29日 15:27/ 0 赞/ 311 阅读

相关微信小程序中 <view> 标签与标签的区别

两者的区别是，<view> 是一个组件，会在页面上做渲染；<block>不是一个组件，它仅仅是一个包装元素，只接受控制属性，不会在页面中做任何渲染。下面是两个<block>使用

落日映苍穹つ/ 2022年05月24日 12:07/ 0 赞/ 276 阅读

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

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

小鱼儿/ 2022年05月14日 09:07/ 0 赞/ 417 阅读

相关小程序view标签水平垂直居中

效果图： ![在这里插入图片描述][20190101153252385.png] test.wxss代码 / 让view标签居中显示 / .bgd{

Love The Way You Lie/ 2022年04月10日 08:59/ 0 赞/ 485 阅读