Bagaimana untuk Menjajarkan Secara Menegak Bahagian Dalam ?

Menjajarkan Menegak Dalam

Pertimbangkan situasi berikut: anda mempunyai bersarang dalam

, seperti yang dilihat dalam kod ini:

<div id="theMainDiv" style="
    border:solid 1px gray;
    cursor:text;
    width:400px;
    padding:0px;">
  <span id="tag1_outer" style="
      background:#e2e6f0;
      padding-right:4px;
      padding-left:4px;
      border:solid 1px #9daccc;
      font:normal 11px arial;
      color:#3c3c3c">as</span>
</div>

Secara lalai, akan dijajarkan ke sudut kiri bawah

. Untuk memusatkan dalam

secara menegak, pertimbangkan pendekatan berikut:

Pilihan 1: Manipulasi Ketinggian Garis

Tetapkan ketinggian garisan kanak-kanak untuk sama dengan ketinggian

.

#theMainDiv {
  height: 20px; /* Set the div height for reference */
}

#tag1_outer {
  line-height: 20px;
}

Pilihan 2: Kedudukan Mutlak

Gunakan kedudukan mutlak pada

bekas. Kemudian, letakkan anak benar-benar di atas:50% dan gunakan margin-atas:-YYYpx, dengan YYY mewakili separuh ketinggian kanak-kanak yang diketahui.

#theMainDiv {
  position: relative; /* Apply relative positioning to the div */
}

#tag1_outer {
  position: absolute;
  top: 50%;
  margin-top: -10px; /* Half the height of the child span */
}

Rujuk artikel yang disediakan tentang memahami penjajaran menegak untuk butiran lanjut dan teknik tambahan .

Atas ialah kandungan terperinci Bagaimana untuk Menjajarkan Secara Menegak Bahagian Dalam ?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!