Bagaimanakah Saya Boleh Memusatkan Teks Dengan Sempurna Di Dalam Sempadan CSS Pekeliling?

Memusatkan Teks dalam Sempadan Pekeliling

Meningkatkan daya tarikan visual elemen web boleh melibatkan penyesuaian bentuk. Corak reka bentuk biasa ialah mencipta bulatan dengan teks berpusat di dalamnya. Artikel ini meneroka penyelesaian berasaskan CSS untuk mencapai perkara itu.

Pendekatan Asal dan Perangkap

Satu pendekatan popular melibatkan penggunaan CSS sahaja untuk melukis bulatan. Walaupun kaedah ini menyediakan rangka kerja asas, menambah teks ke tengah boleh menjadi mencabar. Percubaan untuk memusatkan teks secara menegak dalam bulatan menggunakan penyelesaian sedia ada mungkin menghasilkan bentuk bujur dan bukannya bulatan bersih.

Penyelesaian: Melaraskan Ketinggian Garis

Kunci untuk memusatkan teks dengan sempurna dalam bulatan terletak pada menetapkan sifat ketinggian garis kepada nilai yang sama dengan ketinggian div bekas. Dengan melakukan ini, teks akan dijajarkan secara menegak di tengah bulatan.

Contoh Pelaksanaan

Berikut ialah contoh yang menunjukkan pelaksanaan:

.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>

Dalam contoh ini, div kontena mempunyai lebar dan ketinggian 500 piksel. Ketinggian garis juga ditetapkan kepada 500 piksel, yang memastikan teks dipusatkan secara menegak. Ini menghasilkan bentuk bulat yang sempurna dengan teks diletakkan dengan kemas di tengah.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Memusatkan Teks Dengan Sempurna Di Dalam Sempadan CSS Pekeliling?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!