Bagaimana untuk Menjajarkan Div Bersaiz Dinamik secara Menegak dengan CSS?

Penjajaran Menegak Div ​​Bersaiz Dinamik dengan CSS

Dalam dunia CSS, mencapai penjajaran sempurna boleh menjadi satu cabaran, terutamanya apabila berurusan dengan div dengan saiz yang tidak diketahui atau dinamik. Pertimbangkan senario berikut: anda mempunyai div yang mengandungi imej atau objek kilat dan anda mahu menjajarkannya secara menegak dalam bekas induknya, tanpa mengira dimensi bekas atau kanak-kanak.

Penyelesaian:

CSS menyediakan penyelesaian yang elegan untuk dilema ini. Dengan menggunakan gabungan jajaran menegak: ketinggian tengah dan garisan: 0, kita boleh mencapai kedua-dua pemusatan mendatar dan menegak dalam bekas dengan saiz tidak tentu.

Struktur HTML:

<code class="html"><span id="center">
  <span id="wrap">
    <img src="http://lorempixum.com/300/250/abstract" alt="" />
  </span>
</span></code>

Gaya CSS:

<code class="css">html,
body {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
  overflow: hidden;
}
#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>

Penjelasan:

• menjajarkan menegak: tengah menjajarkan imej secara menegak dalam elemen #wrap, tanpa mengira ketinggiannya.
• line-height: 0 mengalih keluar jarak baris lalai untuk elemen #wrap, memastikan ia tidak mempunyai ketinggian intrinsik.
• Dengan menetapkan teks- jajarkan: tengah dan tinggi garisan ke ketinggian bekas yang diingini, kami mewujudkan garis dasar yang menjajarkan imej secara menegak dalam bekas.
• Elemen #center digunakan untuk meletakkan bekas secara menegak dalam bekas induk dan berpusat menggunakan transformasi CSS.

Nota untuk Internet Explorer 7: Untuk memastikan keserasian dengan IE7, elemen paling dalam (#wrap dan ) hendaklah diisytiharkan pada satu baris, seperti yang ditunjukkan dalam diubah suai ini Struktur HTML:

<code class="html"><span id="center">
  <span id="wrap"><img src="http://lorempixum.com/300/250/abstract" alt="" /></span>
</span></code>

Penyelesaian CSS2 tulen ini menyediakan penjajaran yang boleh dipercayai untuk div dengan dimensi dinamik, sama ada ia mengandungi imej, objek kilat atau elemen lain.

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