如何讓文字在圓形 CSS 邊框內完美居中？

將文字置於圓形邊框內

增強網頁元素的視覺吸引力可以涉及自訂形狀。常見的設計模式是創建一個圓圈，其中文字居中。本文探討了一種基於 CSS 的解決方案來實現這一目標。

原始方法和陷阱

一種流行的方法是單獨使用 CSS 來繪製圓形。雖然此方法提供了基本框架，但向中心添加文字可能具有挑戰性。嘗試使用現有解決方案將文字在圓形內垂直居中可能會導致橢圓形而不是乾淨的圓形。

解決方案：調整行高

關鍵圓內文本的完美居中在於將 line-height 屬性設定為與容器 div 的高度相同的值。透過這樣做，文字將在圓的中心垂直對齊。

範例實作

以下是示範實作的範例：

.circle {
  width: 500px;
  height: 500px;
  line-height: 500px;  <!-- Adjusts vertical text alignment -->
  border-radius: 50%;
  font-size: 50px;
  color: #fff;
  text-align: center;
  background: #000
}

<div class="circle">Hello I am A Circle</div>

在此範例中，容器div 的寬度和高度均為500 像素。行高也設定為 500 像素，這可確保文字垂直居中。這會產生一個完美的圓形，文字整齊地位於中心。

以上是如何讓文字在圓形 CSS 邊框內完美居中？的詳細內容。更多資訊請關注PHP中文網其他相關文章！