Bagaimana untuk memusatkan kotak dalam html5-html tutorial-php.cn

Bagaimana untuk memusatkan kotak dalam html5

下次还敢

Lepaskan： 2024-04-05 12:27:18

asal

1038 orang telah melayarinya

Untuk memusatkan kotak dalam HTML5, terdapat kaedah berikut: pemusatan mendatar: penjajaran teks: margin tengah: paparan automatik: flex; pemusatan menegak: penjajaran menegak: transform tengah: terjemah 50% ); kedudukan: mutlak; atas: 50%; kiri: 50%; ubah: terjemah(-50%, -50%);

Bagaimana untuk memusatkan kotak dalam html5

Cara untuk memusatkan kotak dalam HTML5

, Terdapat beberapa cara untuk memusatkan kotak secara mendatar dan menegak:

pusat secara mendatar

text-align: center: Sifat ini memusatkan teks di dalam kotak secara mendatar. Ia tidak akan memusatkan seluruh kotak secara mendatar, walaupun. text-align: center：此属性将盒子内的文本水平居中。不过，它不会水平居中整个盒子。
margin: auto：此属性将盒子在水平方向居中，前提是盒子已设置了宽度。
display: flex; justify-content: center;：此 CSS 组合将盒子放在一个水平的 flex 容器中，并将其水平居中。

垂直居中

vertical-align: middle：此属性在行内元素（如图像）或表格单元格中垂直居中内容。
transform: translate(-50%, -50%);：此属性将盒子垂直和水平移动其自身高度和宽度的 50%，从而使其居中。它适用于绝对或相对定位的盒子。
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);

margin: auto

: Sifat ini memusatkan kotak secara mendatar, dengan syarat kotak itu mempunyai set lebar.

paparan: flex; justify-content: center;

: Gabungan CSS ini meletakkan kotak dalam bekas fleksibel mendatar dan memusatkannya secara mendatar.

Pusat menegak

menjajarkan menegak: tengah

: Sifat ini memusatkan kandungan secara menegak dalam elemen sebaris (seperti imej) atau sel jadual. 🎜🎜🎜transformasi: terjemah(-50%, -50%);🎜: Sifat ini menggerakkan kotak secara menegak dan mendatar sebanyak 50% daripada ketinggian dan lebarnya sendiri, sekali gus memusatkannya. Ia berfungsi dengan kotak yang betul-betul atau agak berkedudukan. 🎜🎜🎜kedudukan: mutlak; atas: 50%; ubah: terjemah(-50%, -50%);🎜: Gabungan CSS ini akan memusatkan kotak dengan kedudukan mutlak secara menegak dan secara mendatar. 🎜🎜🎜🎜Petua Tambahan🎜🎜🎜🎜🎜Flexbox dan Susun Atur Grid: 🎜Sistem susun atur moden ini menawarkan pilihan pemusatan yang lebih fleksibel. 🎜🎜🎜Peratus Lebar: 🎜 Tetapkan lebar kotak kepada peratusan lebar bekas, menjadikannya sama lebar dengan bekas dan berpusat menegak (jika bekas sudah berpusat menegak). 🎜🎜

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