Bagaimana untuk menulis kod pemusatan html

Pemusatan HTML ialah kaedah reka letak yang sering digunakan dalam reka bentuk web dan kaedah pelaksanaannya agak mudah. Artikel ini akan memperkenalkan secara terperinci beberapa kaedah untuk mencapai pemusatan HTML dan pelaksanaan kod yang sepadan.

1. Pemusatan mendatar

1 Gunakan atribut penjajaran teks untuk mencapai pemusatan mendatar

Tetapkan atribut penjajaran teks ke tengah dalam elemen induk untuk mencapai pemusatan mendatar. elemen dalamannya Berpusat. Contohnya:

<div style="text-align:center;">
    <p>这里是居中文本</p>
</div>

Dengan cara ini, teks dalam akan dipaparkan secara mendatar berpusat dalam elemen induk.

2 Gunakan atribut margin untuk mencapai pemusatan mendatar

Tambah atribut margin pada elemen yang perlu dipusatkan, dan tetapkan nilai jidar kiri dan kanan kepada auto untuk mencapai mendatar. pemusatan unsur. Contohnya:

<div style="width:300px;margin:auto;">
    <p>这里是居中文本</p>
</div>

Dengan cara ini, elemen div akan dipaparkan secara mendatar dan berpusat dalam elemen induk.

3. Gunakan flexbox untuk mencapai pemusatan mendatar

Tetapkan atribut paparan kepada flex dan atribut justify-content ke tengah dalam elemen induk untuk mencapai pemusatan mendatar bagi elemen dalamannya. Contohnya:

<div style="display:flex;justify-content:center;">
    <p>这里是居中文本</p>
</div>

Dengan cara ini, teks dalam akan dipaparkan secara mendatar berpusat dalam elemen induk.

2. Pemusatan menegak

1 Gunakan atribut penjajaran menegak untuk mencapai pemusatan menegak

Tambahkan atribut paparan sel jadual dan penjajaran menegak pada elemen yang memerlukan. berpusat secara menegak Atribut adalah tengah, yang membolehkan elemen berpusat secara menegak. Contohnya:

<div style="display:table-cell;vertical-align:middle;">
    <p>这里是居中文本</p>
</div>

Dengan cara ini, elemen div akan berpusat secara menegak dalam elemen induk.

2 Gunakan flexbox untuk mencapai pemusatan menegak

Tetapkan atribut paparan kepada flex, atribut item-align ke tengah dan atribut ketinggian kepada 100% dalam elemen induk untuk mencapai pemusatan menegak bagi unsur dalamannya. Contohnya:

<div style="display:flex;align-items:center;height:100%;">
    <p>这里是居中文本</p>
</div>

Dengan cara ini, teks dalam akan berpusat secara menegak dalam elemen induk.

3. Pemusatan mendatar dan menegak

1 Gunakan atribut penjajaran teks dan penjajaran menegak untuk mencapai pemusatan mendatar dan menegak

Tetapkan atribut penjajaran teks dalam induk. elemen ke Atribut tengah dan paparan ialah sel jadual, dan atribut penjajaran menegak ditetapkan ke tengah dalam elemen yang perlu dipusatkan, supaya elemen boleh dipusatkan secara mendatar dan menegak pada masa yang sama. Contohnya:

<div style="display:table-cell;text-align:center;vertical-align:middle;">
    <p>这里是居中文本</p>
</div>

Dengan cara ini, elemen div akan berpusat secara mendatar dan menegak dalam elemen induk.

2 Gunakan flexbox untuk mencapai pemusatan mendatar dan menegak

Tetapkan atribut paparan kepada flex, atribut align-item ke tengah, atribut justify-content ke tengah dan atribut ketinggian kepada 100 % dalam elemen induk , yang boleh mencapai pemusatan elemen dalaman mendatar dan menegak. Contohnya:

<div style="display:flex;align-items:center;justify-content:center;height:100%;">
    <p>这里是居中文本</p>
</div>

Di atas adalah beberapa kaedah khusus dan pelaksanaan kod yang sepadan untuk mencapai pemusatan mendatar dan menegak HTML. Dalam aplikasi praktikal, kaedah yang sesuai harus dipilih mengikut keperluan untuk menjadikan reka letak halaman web lebih cantik dan praktikal. Pada masa yang sama, anda harus mengelak daripada menyalahgunakan gaya sebaris dan mengurus helaian gaya dengan cara yang bersatu untuk meningkatkan kebolehbacaan dan kebolehselenggaraan kod.

Atas ialah kandungan terperinci Bagaimana untuk menulis kod pemusatan html. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!