Bagaimanakah anda memusatkan elemen `` secara menegak dalam bekas `` dalam HTML/CSS?

Memusatkan Menegak Dalam div

Dalam HTML/CSS, tugas biasa ialah memusatkan elemen span secara menegak dalam bekas div. Walau bagaimanapun, adalah sukar untuk mencapai penjajaran ini menggunakan teknik standard.

Untuk menangani isu ini, mari kita pertimbangkan contoh kod yang disediakan:

<code class="html"><div id="theMainDiv" style="...">
  <span id="tag1_outer" style="...">as</span>
</div></code>

Apabila kod ini dipaparkan, elemen span dijajarkan ke sudut kiri bawah div. Untuk memusatkannya secara menegak, anda boleh memilih salah satu daripada teknik berikut:

• Tetapkan ketinggian garisan kanak-kanak kepada ketinggian bekas: Kaedah ini memerlukan pengetahuan tentang ketinggian bekas. Dengan menetapkan ketinggian garis elemen span kepada nilai yang sama, anda memusatkan teks secara menegak secara berkesan dalam span.
• Letakkan anak secara mutlak dan gunakan margin-top: Pendekatan ini melibatkan menetapkan kedudukan mutlak pada bekas dan meletakkan secara mutlak elemen span di dalamnya. Anda kemudiannya menetapkan sifat atas rentang kepada 50% dan menggunakan margin atas negatif sama dengan separuh ketinggian rentang. Teknik ini membolehkan anda memusatkan rentang menegak tanpa mengira ketinggian bekas.

Untuk penjelasan menyeluruh tentang penjajaran menegak, rujuk artikel yang dipautkan tentang memahami penjajaran menegak.

Atas ialah kandungan terperinci Bagaimanakah anda memusatkan elemen `` secara menegak dalam bekas `` dalam HTML/CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!