Bagaimana untuk Menjajarkan Div secara menegak dengan Saiz Dinamik dalam CSS?

CSS: Penjajaran Menegak Div ​​dengan Saiz Dinamik

Apabila bekerja dengan elemen div yang mengandungi kandungan dinamik, seperti imej atau denyar, penjajaran mereka secara menegak boleh menjadi satu cabaran. Kaedah tradisional, seperti menetapkan ketinggian tetap atau menggunakan kedudukan mutlak, mungkin tidak boleh dilaksanakan dalam situasi ini.

Nasib baik, CSS menawarkan penyelesaian yang membolehkan penjajaran menegak tanpa memerlukan saiz yang diketahui. Penyelesaian ini adalah berdasarkan gabungan penjajaran menegak: tengah dan ketinggian garis: 0.

Struktur HTML

<code class="html"><span id="center">
    <span id="wrap">
        <img src="image.jpg" alt="" />
    </span>
</span></code>

Peraturan CSS

<code class="css">html, body {
    height: 100%;
    width: 100%;
    padding: 0;
}

#center {
    position: relative;
    top: 50%;
    margin-top: -1000px;
    height: 2000px;
    text-align: center;
    line-height: 2000px;
}

#wrap {
    line-height: 0;
}

#wrap img {
    vertical-align: middle;
}</code>

Cara Ia Berfungsi

• Ketinggian garisan elemen #center ditetapkan kepada nilai tetap (cth. 2000px) dan penjajaran teks ditetapkan ke tengah.
• Elemen #wrap mempunyai ketinggian garisan ditetapkan kepada 0.
• Jajaran menegak imej ditetapkan ke tengah, yang menjajarkannya secara menegak dalam garisan kandungannya elemen.
• Bidar elemen #pusat ialah separuh negatif daripada ketinggian elemen, yang meletakkan elemen secara visual di tengah-tengah port pandangan.

Teknik ini berfungsi dalam kebanyakan masa moden pelayar, termasuk IE8 , dan tanpa memerlukan penggodam penyemak imbas. Ia menawarkan penyelesaian yang bersih dan serba boleh untuk menjajarkan elemen div secara menegak dengan saiz dinamik.

Atas ialah kandungan terperinci Bagaimana untuk Menjajarkan Div secara menegak dengan Saiz Dinamik dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!