Bagaimana untuk Memusatkan Teks dalam Bulatan Dicipta CSS?

Mengubah suai Kalangan CSS untuk Memasukkan Teks Berpusat

Anda menemui contoh menggunakan CSS sahaja untuk melukis bulatan. Walau bagaimanapun, anda kini berusaha untuk mengubah suainya untuk memasukkan teks di tengah.

Pertama, cuba penyelesaian ini:

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

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

Malangnya, ini mungkin menghasilkan bentuk bujur dan bukannya bulatan.

Penyelesaian

Untuk memusatkan teks secara menegak, tetapkan line-height menjadi nilai yang sama dengan ketinggian div. Dalam contoh di atas, ketinggian dan ketinggian garis kedua-duanya ditetapkan kepada 500px.

.circle {
  width: 500px;
  height: 500px;
  line-height: 500px; /* Vertically center the text */
  border-radius: 50%;
  font-size: 50px;
  color: #fff;
  text-align: center;
  background: #000;
}

Pengubahsuaian ini memastikan teks dipaparkan di tengah-tengah dalam bulatan.

Atas ialah kandungan terperinci Bagaimana untuk Memusatkan Teks dalam Bulatan Dicipta CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!