Perbincangan ringkas tentang beberapa kaedah untuk mencapai pemusatan menegak elemen menggunakan CSS

Gunakan CSS untuk mendatar elemen peringkat baris menetapkan pusat penjajaran teks bagi elemen induknya dan set elemen peringkat blok kiri mereka sendiri Hanya tetapkan margin kanan kepada auto. Artikel ini mengumpulkan enam kaedah elemen memusatkan menegak menggunakan CSS, mari lihat!

Kaedah Ketinggian Garis

Percubaan: Teks baris tunggal berpusat menegak, demo

Kod:

html

<p id="parent">
    <p id="child">Text here</p>
</p>

css

#child {
    line-height: 200px;
}

Memusatkan imej secara menegak, kodnya adalah seperti berikut

html

<p id="parent">
    <img src="image.png" alt="" />
</p>

css

#parent {
    line-height: 200px;
}
#parent img {
    vertical-align: middle;
}

Kaedah Jadual CSS

Berkenaan: Universal, demo

Kod:

html

<p id="parent">
    <p id="child">Content here</p>
</p>

css

#parent {display: table;}
#child {
    display: table-cell;
    vertical-align: middle;
}

Versi rendah IE membetulkan pepijat:

#child {
    display: inline-block;
}

Kedudukan Mutlak dan Margin Negatif

Berlaku: elemen peringkat blok, demo

Kod:

html

<p id="parent">
    <p id="child">Content here</p>
</p>

css

#parent {position: relative;}
#child {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 30%;
    width: 50%;
    margin: -15% 0 0 -25%;
}

Kedudukan dan Regangan Mutlak

Berlaku: Universal, tetapi tidak tersedia apabila IE versi lebih rendah daripada 7 Berfungsi seperti biasa, demo

kod:

html

<p id="parent">
    <p id="child">Content here</p>
</p>

css

#parent {position: relative;}
#child {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 50%;
    height: 30%;
    margin: auto;
}

Padding Atas dan Bawah Sama Sama

Berlaku: Universal, demo

Kod:

html

<p id="parent">
    <p id="child">Content here</p>
</p>

css

#parent {
    padding: 5% 0;
}
#child {
    padding: 10% 0;
}

Floater p

Berlaku: Universal, demo

Kod:

html

<p id="parent">
    <p id="floater"></p>
    <p id="child">Content here</p>
</p>

css

#parent {height: 250px;}
#floater {
    float: left;
    height: 50%;
    width: 100%;
    margin-bottom: -50px;
}
#child {
    clear: both;
    height: 100px;
}

Di atas ialah enam kaedah, yang boleh munasabah dalam penggunaan sebenar.

Untuk lebih banyak pengetahuan berkaitan pengaturcaraan, sila lawati:

Pengenalan kepada Pengaturcaraan! !