Bagaimana untuk Menjajarkan Div Bersaiz Dinamik Secara Menegak dalam CSS?

Penjajaran Menegak Div ​​Bersaiz Dinamik dalam CSS

Menjajarkan bekas div secara menegak boleh menimbulkan cabaran apabila ketinggian dan lebar div tidak diketahui terlebih dahulu . Ini selalunya boleh berlaku apabila div mengandungi imej atau objek Flash.

Penjajaran Menegak dengan Saiz Dinamik

Untuk mencapai penjajaran menegak dalam senario ini, kita boleh memanfaatkan kuasa daripada CSS2. Penyelesaian ini tidak melibatkan helah atau godam dan hanya bergantung pada prinsip CSS.

Kunci kepada penjajaran ialah gabungan menjajarkan-menegak: tengah dan tinggi garisan: 0 digunakan pada elemen anak ('bungkus') dalam bekas ('tengah'). Walau bagaimanapun, untuk membuat ini berfungsi, bekas mesti mempunyai ketinggian garis tetap.

Struktur HTML:

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

Gaya CSS:

<code class="css">#center {
    position: relative;
    display: block;
    top: 50%;
    margin-top: -1000px;
    height: 2000px;
    text-align: center;
    line-height: 2000px;
}

#wrap {
    line-height: 0;
}

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

Butiran Pelaksanaan:

• Letakkan Bekas: Div 'tengah' diberi kedudukan relatif dan dijajarkan secara menegak pada 50% daripada bekas induk. Ketinggiannya ditetapkan kepada 2000px untuk memastikan ruang yang mencukupi untuk penjajaran.
• Tetapkan Ketinggian Garisan kepada 0: Div 'bungkus' mempunyai ketinggian garisan ditetapkan kepada 0, dengan berkesan mengalih keluar sebarang ruang antara garisan .
• Penjajaran Tengah: Imej anak div 'balut' dijajarkan secara menegak di tengah menggunakan 'penjajaran menegak: tengah'.

Keserasian

Penyelesaian ini telah diuji dalam IE8 , Opera, Safari, Firefox dan Chrome.

Kaveat IE7:

Dalam IE7 , adalah perlu untuk menggabungkan dua elemen paling dalam menjadi satu baris untuk mencapai penjajaran yang betul:

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

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