Rumah > Artikel > hujung hadapan web > Bagaimana untuk menetapkan pemusatan keseluruhan dalam css
Bagaimana untuk menetapkan pemusatan keseluruhan dalam css
- 下次还敢asal
- 2024-04-25 12:39:15839semak imbas
Gunakan CSS untuk mencapai pemusatan keseluruhan: tetapkan align-item: pusat untuk pemusatan menegak. Tetapkan justify-content: tengah untuk pemusatan mendatar. Menetapkan sifat align-item dan justify-content bersama-sama akan memusatkan keseluruhan item.
Cara menetapkan pemusatan keseluruhan menggunakan CSS
Dalam reka bentuk web, kadangkala anda perlu menjajarkan semua kandungan di tengah, yang boleh dicapai dengan menggunakan ciri penjajaran dan justify-content CSS.
properti align-item
properti align-item digunakan untuk menetapkan penjajaran menegak item (item flex) dalam bekas. Jika align-item ditetapkan ke tengah, item akan dipusatkan secara menegak:
<code class="css">.container {
display: flex;
align-items: center;
}</code>
justify-content property
justify-content property digunakan untuk menetapkan penjajaran mendatar item (item fleksibel) dalam bekas. Jika anda menetapkan justify-content ke tengah, item akan dipusatkan secara mendatar:
<code class="css">.container {
display: flex;
justify-content: center;
}</code>
Center the whole
Untuk memusatkan keseluruhan, anda perlu menetapkan kedua-dua align-item dan justify-content properties:
<code class="css">.container {
display: flex;
align-items: center;
justify-content: center;
}</code>
Contoh
Contoh berikut menunjukkan cara menggunakan CSS untuk memusatkan semua kandungan pada halaman web:
<code class="html"><!DOCTYPE html>
<html>
<head>
<style>
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
</style>
</head>
<body>
<h1>Hello, world!</h1>
</body>
</html></code>Atas ialah kandungan terperinci Bagaimana untuk menetapkan pemusatan keseluruhan dalam css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!