Bagaimana untuk memusatkan dalam Grid CSS?-tutorial css-php.cn

Bagaimana untuk memusatkan dalam Grid CSS?

王林

Lepaskan： 2023-08-22 23:13:01

ke hadapan

1398 orang telah melayarinya

Grid menyusun kandungan dalam susun atur baris dan lajur. Perkara yang sama berlaku untuk grid CSS.

Memusatkan dalam Grid CSS menggunakan Flex

Tetapkan item grid sebagai bekas fleksibel−

display: flex

Salin selepas log masuk

Untuk memusatkan secara menegak dan mendatar, gunakan −

align-items: center;
justify-content: center;

Salin selepas log masuk

Contoh

Mari kita lihat contoh lengkap −

<!DOCTYPE html>
<html>
<head>
   <title>Grid and Flex Example</title>
   <style>
      html,body {
         margin: 0;
         padding: 0;
      }

      .box {
         display: grid;
         grid-template-columns: 1fr 1fr;
         grid-template-rows: 100vh;
      }

      .first,
      .second {
         display: flex;
         align-items: center;
         justify-content: center;
      }

      .first {
         background-color: orange;
      }

      .second {
         background-color: yellow;
      }
   </style>
</head>
<body>
   <div class="box">
      <div class="first">Left</div>
      <div class="second">Right</div>
   </div>
</body>
</html>

Salin selepas log masuk

Output

Gunakan Grid CSS untuk mencapai pemusatan tanpa menggunakan Flex

Kita juga boleh center tanpa menggunakan Flex. Kami menetapkan bekas grid untuk memaparkan: grid. Apabila atribut paparan ditetapkan kepada grid, elemen HTML menjadi bekas grid -

grid-container {
   display: grid;
   grid-template-columns: 1fr 1fr;
   grid-auto-rows: 150px;
   grid-gap: 20px;
}

Salin selepas log masuk

Item grid menggunakan tetapan kedudukan relatif -

grid-item {
   position: relative;
   text-align: center;
}

Salin selepas log masuk

Contoh

Namun,

<!DOCTYPE html>
<html>
<head>
   <title>Grid</title>
   <style>
      grid-container {
         display: grid;
         grid-template-columns: 1fr 1fr;
         grid-auto-rows: 150px;
         grid-gap: 20px;
      }

      grid-item {
         position: relative;
         text-align: center;
      }

      grid-container {
         background-color: red;
         padding: 10px;
      }

      grid-item {
         background-color: orange;
      }
   </style>
</head>
<body>
   <grid-container>
      <grid-item>This is in the center</grid-item>
      <grid-item>This is in the center</grid-item>
   </grid-container>
</body>
</html>

Salin selepas log masuk

Output

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