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:15854semak 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.

Bagaimana untuk menetapkan pemusatan keseluruhan dalam css

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!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya:Di manakah gaya css ditulis?Artikel seterusnya:Di manakah gaya css ditulis?