Rumah > hujung hadapan web > tutorial css > Bagaimana untuk Memusatkan Div Secara Mendatar Dalam Bekas?

Bagaimana untuk Memusatkan Div Secara Mendatar Dalam Bekas?

Barbara Streisand
Lepaskan: 2024-11-02 14:54:29
asal
797 orang telah melayarinya

How to Center Divs Horizontally Within a Container?

Penjajaran Mendatar Div Dalam Bekas

Apabila cuba memusatkan div secara mendatar dalam bekas, seseorang mungkin menghadapi kesukaran. Ini selalunya disebabkan oleh gelagat lalai float: left.

Untuk menangani isu ini, pertimbangkan untuk menggunakan display: inline-block dan bukannya float untuk div. Teknik ini menghapuskan keperluan untuk pengiraan manual margin dan membolehkan penjajaran responsif.

Sebagai contoh, dalam CSS berikut:

<code class="css">.row {
  width: 100%;
  margin: 0 auto;
}
.block {
  width: 100px;
  display: inline-block;
}</code>
Salin selepas log masuk

Div dengan kelas "blok" akan berfungsi sebagai elemen sebaris dan akan menjajarkan dirinya secara mendatar dalam div bekas dengan kelas "baris".

Selain itu, untuk kes yang terdapat div baris dengan hanya satu div blok, anda boleh memusatkannya menggunakan text-align: center:

<code class="css">.row-with-single-block {
  text-align: center;
}</code>
Salin selepas log masuk

Atas ialah kandungan terperinci Bagaimana untuk Memusatkan Div Secara Mendatar Dalam Bekas?. 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
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan