zl程序教程

您现在的位置是:首页 >  工具

当前栏目

【微信小程序】03-文字一左一右显示,行内块元素居中

微信程序 显示 元素 文字 03 居中 行内
2023-09-11 14:19:17 时间

 效果展示

 实现程

 WXML 文件:

<view class="doctor">
  <view class="doctor-tit">
    <view class="left-tit">医生推荐</view>
    <view class="right-tit">查看更多></view>
  </view>
  <view class="doctor-list">
    <view class="list">
      <image class="doctor-pic" src="../../images/center.png"></image>
      <view class="doctor-name">赵医师</view>
    </view>
    <view class="list">
      <image class="doctor-pic" src="../../images/center.png"></image>
      <view class="doctor-name">陈医师</view>
    </view>
    <view class="list">
      <image class="doctor-pic" src="../../images/center.png"></image>
      <view class="doctor-name">刘医师</view>
    </view>
  </view>
</view>

WXSS样式:

01 文字左右显示

     display: flex;
     justify-content: space-between;

02 盒子居中显示

     display : flex;
     justify-content : space-around;

/* 医生推荐 */
.doctor-tit {
  height: 20px;
  padding: 15px;
  display: flex;
  justify-content: space-between;
}
.left-tit {
  font-size: 14pt;
  text-align: justify;
}
.right-tit {
  margin-top: 5px;
  font-size: 10pt;
  color: #b2b2b2;
}
.doctor-list {
  display : flex;
  width: 100%;
  background-color: #fff;
  justify-content : space-around;
}
.list {
  width: 30%;
  height: 150px;
  border: 1px solid red;
  text-align: center;
}
.list .doctor-pic {
  width: 100%;
  height: 120px;
}
.list .doctor-name {
  font-size: 12pt;
}