Bagaimana untuk memusatkan teks dalam css

CSS ialah bahagian penting dalam reka bentuk halaman moden, di mana teks ialah salah satu elemen penting untuk halaman web. Bagaimana untuk memusatkan teks ialah soalan yang sangat penting dan asas. Dalam artikel ini, kami akan membimbing anda tentang cara memusatkan teks dengan berkesan menggunakan CSS.

Secara umumnya, terdapat dua cara untuk memusatkan teks: pemusatan mendatar dan pemusatan menegak. Dalam teks berikut, kami akan memperkenalkan kedua-dua kaedah ini secara berasingan.

1. Pemusatan mendatar

Pemusatan mendatar ialah meletakkan teks di tengah-tengah elemen induk dan memerlukan kawasan kosong di sebelah kiri dan kanan teks adalah sama saiz . Di bawah ini kami akan memperkenalkan tiga kaedah pelaksanaan, iaitu menggunakan text-align, menggunakan margin dan menggunakan Flexbox.

1. text-align

Atribut penjajaran teks boleh digunakan pada elemen peringkat blok teks (seperti p, h1-h6, dll.) untuk membuat selaraskan teks dengan elemen induknya Selaraskan ke tengah. Contohnya:

div {
  text-align: center;
}

Kod di atas akan menjajarkan teks ke tengah div yang mengandunginya.

2. margin

Anda juga boleh menggunakan margin ke teks tengah Kaedah ini memerlukan penggunaan atribut kiri dan kanan margin, contohnya:

div {
  margin-left: auto;
  margin-right: auto;
}

Kod di atas Menetapkan jidar kiri dan kanan (margin) akan meletakkan elemen div di tengah elemen induknya untuk mencapai pemusatan mendatar teks.

3. Flexbox

Flexbox ialah mod susun atur baharu yang boleh mencapai penjajaran tengah teks halaman web dengan mudah dengan menetapkan ciri item flex dan flex. Berikut ialah contoh asas:

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

Dalam kod di atas, reka letak flex ditetapkan pada elemen induk dan atribut justify-content ditetapkan ke tengah, supaya item flex dalam bekas flex adalah berpusat.

2. Pemusatan menegak

Pemusatan menegak bermaksud meletakkan teks di tengah-tengah elemen induknya dan memerlukan kawasan kosong pada kedua-dua belah teks adalah sama besarnya. Berikut adalah beberapa cara untuk melakukannya.

1. Gunakan atribut ketinggian garis

untuk menetapkan ketinggian garisan teks sama dengan ketinggian elemen induk untuk mencapai pemusatan menegak. Contohnya:

.parent {
  height: 200px;
  line-height: 200px;
}

Dalam kod di atas, menetapkan ketinggian elemen induk dan ketinggian baris teks kepada nilai yang sama (200px) boleh mencapai pemusatan menegak.

2. Menggunakan atribut jajaran menegak

Atribut jajaran menegak ialah cara biasa untuk memusatkan elemen peringkat baris secara menegak. Contohnya:

.parent {
  display: table-cell;
  vertical-align: middle;
}

Dalam kod di atas, jika atribut paparan elemen induk ditetapkan kepada sel jadual dan atribut penjajaran menegak ditetapkan ke tengah, teks boleh dipusatkan secara menegak.

3. Menggunakan Flexbox

Flexbox juga boleh digunakan untuk mencapai pemusatan menegak. Berikut ialah beberapa contoh asas:

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
}

Kod di atas menetapkan ketinggian bekas fleksibel kepada 200 piksel dan menetapkan sifat justify-content dan align-item ke tengah, dengan itu memusatkan teks secara menegak.

Ringkasnya, CSS memberikan kita banyak kaedah yang berkesan untuk mencapai penjajaran tengah teks. Situasi dan keperluan yang berbeza mungkin memerlukan pendekatan yang berbeza, tetapi apabila anda menguasai teknik asas ini, anda akan selesa menggunakannya dalam reka bentuk web.

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