午夜91福利视频,午夜成人在线观看,午夜在线视频免费观看,午夜福利短视频,精品午夜成人免费视频APP

小程序模板網

微信小程序view中用flex實現文字的垂直居中

發布時間：2021-06-10 09:43 所屬欄目：小程序開發教程
視圖容器view上設置
  1. view{ display: flex; justify-content: center;align-items: center;}


view相當于div是一個視圖容器，傳統的方法實現div中文字的水平垂直居中是設置div的兩個屬性：text-align：center；和line-height：100%；即可實現div容器中內容的水平垂直居中，那么今天我們來用flex彈性盒子來實現小程序中view視圖容器里面內容的水平垂直居中，話不多說，直接上代碼：
  1. //wxml
  2. <view class='section'>
  3.   <view>one</view>
  4.   <view>two</view>
  5.   <view>three</view>
  6. </view>
 
  1. //wxss
  2. .section{
  3.   height: 200rpx;
  4.   display: flex;
  5.   flex-direction: row;
  6.   /* 在父元素view屬性上設置一下三個屬性并不會實現子元素內容的水平垂直居中，所以要格外注意 */
  7.   /* display: -webkit-flex; */
  8.   /* align-items: center; */
  9.   /* justify-content: center; */
  10. }
  11. .section view{
  12.   width: 200rpx;
  13.   height: 100%;
  14.   /* 得在需要讓內容居中的元素上設置以下三個元素才會使里面內容水平垂直居中*/
  15.   display: flex;
  16.   justify-content: center;
  17.   align-items: center;
  18. }
  19. .section view:nth-child(1){
  20.   background: red;
  21.   /* 表示根據是否有剩余寬度進行縮放 */
  22.   flex: 1;
  23. }
  24. .section view:nth-child(2){
  25.   background: orange;
  26. }
  27. .section view:nth-child(3){
  28.   background: pink;
  29. }


易優小(xiao)程序（企業(ye)版）+靈活api+前后(hou)代(dai)碼(ma)開(kai)源 碼云倉庫:
本文地址：//www.jinyoudianli.com/wxmini/doc/course/26366.html 復制鏈接 如需定制請聯系(xi)易優客服咨詢：

工作日 8:30-12:00 14:30-18:00
周(zhou)六及(ji)部分節假日提供值班服(fu)務

易小優
轉人工 ×