Artikel ini memberikan gambaran keseluruhan tentang pelbagai kaedah CSS untuk elemen pemusatan menegak. Isu utama yang ditangani ialah mencapai penjajaran menegak dengan ketinggian kandungan yang berbeza-beza. Perbincangan meliputi Flexbox, Grid, Position Absolute, dan Table Displ
pusat
untuk memusatkan elemen anak secara menegak dalam bekas fleksibel. Kaedah ini berfungsi dengan baik untuk reka letak mudah dan disokong secara meluas oleh penyemak imbas moden.
align-items
property, which can be set to
center
to vertically center child elements within a flex container. This method works well for simple layouts and is widely supported by modern browsers.
justify-content
andalign-content
properties to vertically center content within a grid container. These properties allow for more precise control over alignment and distribution.top
andbottom
properties to50%
will center it vertically. However, this method requires specifying the element's height explicitly, making it less flexible for varying content heights.display
property totable
and itsvertical-align
property tomiddle
will vertically center its content. This method is particularly useful for tabular data and ensures correct alignment even when content heights differ.To align elements vertically with differing heights, use methods that are not constrained by content height.
align-items: center
and applymargin: auto
to the child elements. This automatically distributes the available vertical space evenly, allowing elements to vertically center regardless of their height.For cross-browser compatibility, the preferred solutions are:
align-items: center
(widely supported)justify-content: center
andalign-content: center
(not supported by older versions of IE)vertical-align: middle
justify-content
dan
align-content
untuk memusatkan kandungan secara menegak dalam bekas grid. Sifat ini membenarkan kawalan yang lebih tepat ke atas penjajaran dan pengedaran.Kedudukan Mutlak: Meletakkan elemen secara mutlak dan menetapkan sifat
bawah
nya kepada
display
elemen kepada
table
dan sifatnya Sifat
vertical-align
ke
mid
akan memusatkan kandungannya secara menegak. Kaedah ini amat berguna untuk data jadual dan memastikan penjajaran yang betul walaupun apabila ketinggian kandungan berbeza.Bagaimanakah Saya Boleh Mencapai Penjajaran Menegak Sempurna dengan Ketinggian Kandungan Berbeza dalam CSS?Untuk menjajarkan elemen secara menegak dengan ketinggian yang berbeza, gunakan kaedah yang bukan dikekang oleh ketinggian kandungan.Flexbox dengan Auto Margin: Gunakan Flexbox dengan
align-item: center
dan gunakan
margin: auto
pada elemen anak. Ini secara automatik mengagihkan ruang menegak yang tersedia secara sama rata, membenarkan elemen untuk berpusat secara menegak tanpa mengira ketinggiannya.Apakah Penyelesaian Silang Penyemak Imbas Terbaik untuk Elemen Memusatkan Menegak dalam CSS?Untuk keserasian merentas penyemak imbas, penyelesaian pilihan ialah: Flexbox dengan
align-item: center
(disokong secara meluas)Grid dengan
justify-content: center
dan
align-content: center
(tidak disokong oleh versi lama IE)Paparan Jadual dengan
Atas ialah kandungan terperinci pelaksanaan pemusatan menegak css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!