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
Lepaskan: 2024-12-07 02:01:11
asal
590 orang telah melayarinya

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
}
Salin selepas log masuk
  1. Tambahkan teks pada div. Balut teks yang dikehendaki dalam
    elemen.
<div class="circle">Hello I am A Circle</div>
Salin selepas log masuk

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!

sumber:php.cn
Kenyataan Laman Web ini
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
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan