Bagaimana untuk Memusatkan Blok Div ​​dengan Kandungan Dijana Secara Dinamik?

Memusatkan Blok Div ​​Bersaiz Dinamik

Masalah:

Memusatkan blok div tanpa mengetahui lebarnya terlebih dahulu boleh menjadi satu cabaran. Kaedah tradisional bergantung pada lebar tetap, yang tidak boleh dilaksanakan apabila kandungan dijana secara dinamik.

Penyelesaian 1 (Disyorkan): Pendekatan Blok Sebaris

Menggunakan inline- ciri blok dan penjajaran teks, anda boleh memusatkan elemen dalam induk bekas.

.child {
  display: inline-block;
}
.parent {
  text-align: center;
}

Pendekatan ini memusatkan elemen anak berdasarkan lebarnya sendiri, menjadikannya responsif kepada kandungan dinamik.

Penyelesaian 2: Kedudukan Relatif Bersarang

Kaedah ini menggunakan div bersarang dengan relatif kedudukan.

<div class="product_container">
    <div class="outer-center">
        <div class="product inner-center">
        </div>
    </div>
    <div class="clear"></div>
</div>

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

Div luar diposisikan 50% dari kanan dan div dalam diposisikan -50% dari kanan, dengan berkesan memusatkan kandungan.

Atas ialah kandungan terperinci Bagaimana untuk Memusatkan Blok Div ​​dengan Kandungan Dijana Secara Dinamik?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!