很久沒更新部落格了…趁做畢設的機會記錄一下。

需求

畫一個實心圓，並在圓中居中顯示一行標題

實現思路

1. 畫圓：這裡需要注意 border-radius:50%
2. 居中顯示文字：此處需要令 line-height 值等於 height ，並設定 text-align:center

程式碼

1. html程式碼

  <view class="circle">
    <view class='circle-text'>
    {{chooseImg}}
    </view>
  </view>
 

2. css程式碼

.circle{
  width: 360rpx;
  height: 360rpx;
  margin-top: 180rpx;
  border-radius: 50%;
  background-color: #1E90FF;
}

.circle-text{
  width: 360rpx;
  height: 360rpx;
  line-height: 360rpx;
  text-align: center;
  font-size: 56rpx;
  color: #ffffff;
}

效果