Bagaimana untuk memusatkan kotak dalam html

Bagaimana untuk memusatkan kotak dalam HTML? Tengah secara mendatar: Tetapkan penjajaran teks ke tengah atau gunakan jidar automatik. Tengah secara menegak: Tetapkan jidar kiri dan kanan kepada 0, atau gunakan kedudukan mutlak dan mengimbangi elemen.

Cara memusatkan kotak menggunakan HTML

Memusatkan kotak boleh dilakukan dengan mudah menggunakan helaian gaya CSS dalam HTML. Terdapat dua cara utama untuk mencapai pemusatan kotak:

Pemusatan mendatar

1. Tetapkan gaya text-align: center;: Ini adalah untuk mendatar memusatkan elemen peringkat blok (seperti div code>, <code>h1 atau p). text-align: center; 样式：这是水平居中块级元素（如 div、h1 或 p）的最简单方法。
2. 使用 margin: auto; 样式：这种方法适用于非块级元素（如内联元素），例如图像或嵌入式视频。它将自动设置元素的左右边距，以使其居中。

垂直居中

1. 使用 margin: 0 auto; 样式：此样式将元素的左右边距设置为 0，并将其垂直居中。
2. 使用 position: absolute; 样式：此样式将元素从正常文档流中删除，并允许您使用 top 和 left 属性来绝对定位它。然后，可以将这些属性设置为 50% 并使用 transform: translate(-50%, -50%); 偏移元素，以将其居中。

示例

以下示例展示了如何使用 HTML 和 CSS 将一个盒子水平和垂直居中：

<code class="html"><div style="text-align: center; margin: 0 auto;">
  <p>这是一个水平和垂直居中的盒子。</p>
</div></code>

注意：

• 确保容器元素具有足够的高度或宽度以容纳居中的元素。
• 对于复杂的布局，您可能需要结合使用水平和垂直居中技术。
• 对于跨浏览器兼容性，请务必在每个样式中指定前缀（如 -webkit-、-moz-
Gunakan margin: auto; gaya: Kaedah ini berfungsi untuk elemen bukan peringkat blok (seperti elemen sebaris), seperti imej atau video terbenam. Ia secara automatik akan menetapkan margin kiri dan kanan elemen supaya ia berpusat.

🎜🎜Berpusat secara menegak 🎜🎜🎜🎜Gunakan margin: 0 auto; style: Gaya ini menetapkan jidar kiri dan kanan elemen kepada 0 dan Centered secara menegak. 🎜🎜Gunakan gaya position: absolute;: Gaya ini mengalih keluar elemen daripada aliran dokumen biasa dan membolehkan anda menggunakan atas dan kiri Kedudukannya secara mutlak. Anda kemudiannya boleh menetapkan sifat ini kepada 50% dan mengimbangi elemen menggunakan transform: translate(-50%, -50%); untuk memusatkannya. 🎜🎜🎜Contoh🎜🎜🎜Contoh berikut menunjukkan cara memusatkan kotak secara mendatar dan menegak menggunakan HTML dan CSS: 🎜rrreee🎜🎜Nota: 🎜🎜

🎜Pastikan elemen bekas mempunyai ketinggian atau lebar yang mencukupi kepada Mengandungi elemen berpusat. 🎜🎜Untuk reka letak yang kompleks, anda mungkin mahu menggunakan gabungan teknik pemusatan mendatar dan menegak. 🎜🎜Untuk keserasian merentas penyemak imbas, pastikan anda menentukan awalan dalam setiap gaya (cth. -webkit-, -moz-). 🎜🎜

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