Bagaimana untuk menetapkan pemusatan keseluruhan dalam css-tutorial css-php.cn

Bagaimana untuk menetapkan pemusatan keseluruhan dalam css

下次还敢

Lepaskan： 2024-04-25 12:39:15

asal

784 orang telah melayarinya

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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>

Salin selepas log masuk

Atas ialah kandungan terperinci Bagaimana untuk menetapkan pemusatan keseluruhan dalam css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!