Bagaimana untuk menjajarkan css ke tengah

Dalam CSS, penjajaran tengah ialah masalah biasa. Terdapat banyak cara untuk mencapai penjajaran tengah, dan artikel ini akan memperkenalkan sebahagian daripadanya.

1. Center align text

Untuk menjajarkan teks secara mendatar anda boleh menggunakan kaedah berikut:

text-align: center;

Ini akan memusatkan semua teks dalam elemen secara mendatar Dijajarkan ke tengah secara arah, tetapi tidak secara menegak.

Untuk menjajarkan teks secara menegak, anda boleh menggunakan kaedah berikut:

display: flex;
align-items: center;
justify-content: center;

Ini akan menggunakan Flexbox untuk menjajarkan semua dalam elemen secara menegak dan mendatar.

2. Selaraskan tengah elemen peringkat blok

Katakan kita mahu menyelaraskan elemen div secara mendatar dan menegak Berikut ialah cara melakukannya:

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

Ini akan menjajarkan elemen ke tengah dengan meletakkan sudut kiri atasnya pada titik tengah elemen induk. Atribut transform digunakan untuk menggerakkan elemen 50% ke atas dan ke kiri untuk menjajarkan titik tengah elemen dengan titik tengah elemen induk.

3. Imej jajar tengah

Untuk menjajarkan imej secara mendatar gunakan kaedah berikut:

display: block;
margin: auto;

Ini akan menjajarkan imej secara mendatar. Untuk menjajarkan imej secara menegak, anda boleh menggunakan kaedah berikut:

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

4. Pusat jadual

Untuk menjajarkan jadual secara mendatar, anda boleh menggunakan kaedah berikut:

margin: 0 auto;

Ini akan menyelaraskan meja secara mendatar. Untuk menjajarkan jadual secara menegak, anda boleh menggunakan yang berikut:

display: flex;
align-items: center;
justify-content: center;

Ini akan menggunakan Flexbox untuk menjajarkan jadual secara menegak dan mendatar.

5. Jajarkan ke tengah elemen anak

Untuk menjajarkan elemen anak ke tengah, anda boleh gunakan:

display: flex;
align-items: center;
justify-content: center;

Ini akan menggunakan Flexbox untuk menegak dan menjajarkan tengah semua elemen kanak-kanak secara mendatar.

Dalam artikel ini, kami memperkenalkan beberapa kaedah penjajaran tengah, termasuk teks, imej, elemen peringkat blok, jadual, dsb. Apabila memilih tempoh untuk digunakan, anda perlu memilih kaedah yang paling sesuai mengikut situasi yang berbeza.

Atas ialah kandungan terperinci Bagaimana untuk menjajarkan css ke tengah. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!