Bagaimana untuk Memusatkan Blok Div ​​Tanpa Mengetahui Lebarnya?

Memusatkan Blok Div ​​tanpa Kekangan Lebar

Memusatkan blok div tanpa mengetahui lebarnya boleh menjadi satu cabaran. Artikel ini menangani isu ini dengan menyediakan dua penyelesaian yang berkesan:

Penyelesaian 1: Inline-block dan Text-align

Penyelesaian ini melibatkan penetapan item untuk dipusatkan sebagai paparan : inline-block dan bekas induknya sebagai text-align: center. Pendekatan ini bergantung pada cara elemen blok sebaris dikendalikan oleh penyemak imbas.

CSS:

.child {
  display: inline-block;
}

.parent {
  text-align: center;
}

Penyelesaian 2: Kedudukan Relatif

Penyelesaian ini menggunakan kedudukan relatif untuk memusatkan kandungan. Ia melibatkan membungkus kandungan berpusat di dalam dua div: div luar dan div dalam.

HTML:

<div>

CSS:

.outer-center {
  float: right;
  right: 50%;
  position: relative;
}

.inner-center {
  float: right;
  right: -50%;
  position: relative;
}

.clear {
  clear: both;
}

Div luar ialah terapung ke kanan dan tepi kanannya diposisikan 50% dari tepi induknya. Div dalam juga terapung ke kanan, tetapi tepi kanannya diposisikan -50% dari tepi kanan div luar, dengan berkesan memusatkan div dalam dan kandungannya dalam div induk.

Kesimpulan

Kedua-dua penyelesaian menyediakan kaedah yang berkesan untuk memusatkan blok div tanpa mengetahui lebarnya terlebih dahulu. Pilihan penyelesaian untuk digunakan bergantung pada keperluan khusus dan kekangan projek.

Atas ialah kandungan terperinci Bagaimana untuk Memusatkan Blok Div ​​Tanpa Mengetahui Lebarnya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!