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

 效果展示

 实现程

 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;
}