Bagaimana untuk menetapkan kotak untuk dipusatkan dalam html

Untuk menetapkan pusat kotak dalam HTML, anda boleh menggunakan kaedah berikut: pemusatan mendatar: penjajaran teks: pemusatan automatik 0: penjajaran menegak: flex-item: tengah; dua dimensi Pusat: paparan: flex; justify-content: center; align-item: center; Terdapat beberapa cara untuk mencapai ini, bergantung pada jenis elemen yang ingin anda selaraskan dan pemusatan yang dikehendaki.

Pemusatan mendatar

Pemusatan mendatar bermaksud memusatkan kotak secara mendatar pada elemen induknya. Terdapat dua kaedah biasa:

text-align: center;

: Ini akan memusatkan kandungan teks secara mendatar dalam elemen peringkat blok.

margin: 0 auto;: Ini akan memusatkan elemen peringkat blok secara mendatar dalam elemen induk.

Contohnya:

<code class="html"><div style="text-align: center;">
  <p>Hello, world!</p>
</div></code>

Pemusatan menegak
• text-align: center;：这会将文本内容水平居中在一个块级元素中。
• margin: 0 auto;：这会将块级元素水平居中在父元素中。

例如：

<code class="html"><div style="display: flex; align-items: center;">
  <img src="image.jpg" style="vertical-align: middle;">
</div></code>

垂直居中

垂直居中是指使盒子垂直对其父元素居中。有两种常用的方法：

• vertical-align: middle;：这会将行内元素（如图像或文本）垂直居中在父元素中。
• display: flex; align-items: center;：这会将块级元素垂直居中在父元素中。

例如：

<code class="html"><div style="display: flex; justify-content: center; align-items: center;">
  <div>Box</div>
</div></code>

两个维度居中

要同时水平和垂直居中一个盒子，可以使用 flexboxPemusatan menegak bermaksud memusatkan kotak secara menegak pada elemen induknya. Terdapat dua kaedah biasa:

🎜🎜🎜menjajarkan menegak: tengah;🎜: Ini akan memusatkan elemen sebaris secara menegak (seperti imej atau teks) dalam elemen induk. 🎜🎜paparan: flex; align-item: center;🎜: Ini akan memusatkan elemen peringkat blok secara menegak dalam elemen induk. 🎜Contohnya: 🎜rrreee🎜🎜Memusatkan dalam dua dimensi🎜🎜🎜Untuk memusatkan kotak secara mendatar dan menegak, anda boleh menggunakan flexbox, seperti yang ditunjukkan di bawah: 🎜rrreee

Atas ialah kandungan terperinci Bagaimana untuk menetapkan kotak untuk dipusatkan dalam html. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!