Rumah >hujung hadapan web >tutorial css >Bagaimana untuk Memusatkan Teks dalam Bulatan yang Dilukis CSS?

Bagaimana untuk Memusatkan Teks dalam Bulatan yang Dilukis CSS?

Linda Hamilton
Linda Hamiltonasal
2024-12-07 02:01:11644semak imbas

How to Center Text within a CSS-Drawn Circle?

Cara Melukis Bulatan dengan Teks di Tengah

Untuk mencipta bulatan dengan teks di tengah menggunakan CSS, ubah suai kod yang digunakan untuk melukis bulatan:

  1. Tetapkan ketinggian garisan agar sepadan dengan ketinggian div. Ini memaksa satu baris teks kelihatan berpusat menegak. Dalam contoh di bawah, ketinggian dan ketinggian garisan ditetapkan kepada 500px.
.circle {
  width: 500px;
  height: 500px;
  line-height: 500px;
  border-radius: 50%;
  font-size: 50px;
  color: #fff;
  text-align: center;
  background: #000
}
  1. Tambahkan teks pada div. Balut teks yang dikehendaki dalam
    elemen.
<div class="circle">Hello I am A Circle</div>

Kod ini akan membuat bulatan berpusat dengan teks "Hello I am A Circle" diletakkan di tengah.

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

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn