Rumah > hujung hadapan web > Soal Jawab bahagian hadapan > Bagaimana untuk menjajarkan css ke tengah

Bagaimana untuk menjajarkan css ke tengah

PHPz
Lepaskan: 2023-04-23 17:21:22
asal
4194 orang telah melayarinya

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;
Salin selepas log masuk

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;
Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk

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

  1. 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%);
Salin selepas log masuk
Salin selepas log masuk

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.

  1. Imej jajar tengah

Untuk menjajarkan imej secara mendatar gunakan kaedah berikut:

display: block;
margin: auto;
Salin selepas log masuk

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%);
Salin selepas log masuk
Salin selepas log masuk
  1. Pusat jadual

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

margin: 0 auto;
Salin selepas log masuk

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

display: flex;
align-items: center;
justify-content: center;
Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk

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

  1. Jajarkan ke tengah elemen anak

Untuk menjajarkan elemen anak ke tengah, anda boleh gunakan:

display: flex;
align-items: center;
justify-content: center;
Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk

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!

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
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan