文字在菱形內垂直對齊

Question

我已經通過使用以下代碼成功創建了Diamond

CSS：

  .diamond { height: 75px; width: 75px; border-radius:15px; transform: rotate(45deg); float: left; margin-left: 18%; font-size:50px; color: white; font-family:Adequate-ExtraLight; } 

  <div class="diamond" style="background-color:#ff4d4d">48</div> 

上面的代碼產生的輸出具有傾斜的文本，但是我想水平放置文本。 我嘗試過但失敗了。 任何人都可以告訴我如何實現這一目標。

Answer 1

 .diamond { height: 75px; width: 75px; border-radius:15px; transform: rotate(45deg); float: left; margin-left: 18%; font-size:50px; color: white; font-family:Adequate-ExtraLight; } .content{ transform: rotate(-45deg); } 

  <div class="diamond" style="background-color:#ff4d4d"> <div class="content"> 48 </div> </div> 

或者您可以使div的絕對位置使之發生，也可以通過CSS中的z索引來完成

 .diamond { position: absolute; height: 75px; width: 75px; border-radius:15px; transform: rotate(45deg); float: left; margin-left: 18%; font-size:50px; color: white; font-family:Adequate-ExtraLight; } .content{ position: absolute; height: 75px; width: 75px; border-radius:15px; float: left; margin-left: 20%; font-size:50px; color: white; font-family:Adequate-ExtraLight; } 

 <div> <div class="diamond" style="background-color:#ff4d4d"> </div> <div class="content"> 48 </div> </div> 

Answer 2

<div class="diamond" style="background-color:#ff4d4d">
  <div class="text-inside-diamond">48</div>
</div>

.text-inside-diamond {
  transform: rotate(-45deg);
  margin-left: 10%;
}

內部類的左邊距只是將div類的div居中對齊。