Bagaimana untuk memusatkan teks dalam kotak dalam html

Terdapat empat cara untuk memusatkan teks dalam kotak HTML: Gunakan ciri penjajaran teks CSS: tengah untuk memusatkannya secara mendatar. Gunakan sifat padding-block-start dan padding-block-end untuk pemusatan menegak. Gunakan paparan Flexbox: flex; justify-content: center; align-item: tengah untuk penjajaran fleksibel. Gunakan Grid grid-template-columns: repeat(auto-fit, minmax(0, 1fr)

Cara memusatkan teks dalam kotak dalam HTML

Dalam HTML, anda boleh memusatkan teks dalam kotak Berbilang kaedah:

Gunakan sifat CSS

text-align: center: Kaedah yang paling biasa, yang memusatkan teks secara mendatar dalam bekas

<code class="css">.container {
  text-align: center;
}</code>

padding-block-start dan padding-block-end: Berlaku untuk teks berpusat menegak. Tetapkan sifat ini kepada nilai piksel yang sama kepada teks secara menegak dalam bekas blok

<code class="css">.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-block-start: 1rem;
  padding-block-end: 1rem;
}</code>

Gunakan Flexbox

display: flex-content: center; jajarkan elemen secara mendatar dan menegak Kaedah grid untuk membuat reka letak grid ini menghasilkan grid satu lajur dengan teks berpusat mendatar dan menegak

<code class="css">.container {
  display: flex;
  justify-content: center;
  align-items: center;
}</code>

Atas ialah kandungan terperinci Bagaimana untuk memusatkan teks dalam kotak dalam html. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!