Computer >> Máy Tính >  >> Lập trình >> CSS

Căn chỉnh theo chiều dọc toàn bộ lưới bên trong vùng chứa bằng CSS

Bạn có thể thử chạy mã sau để căn chỉnh theo chiều dọc lưới bằng cách sử dụng align-content tài sản -

Ví dụ

<!DOCTYPE html>
<html>
   <head>
      <style>
         .container {
            display: grid;
            background-color: gray;
            align-content: center;
            padding: 20px;
            grid-gap: 20px;
         }
         .container > div {
            background-color: orange;
            border: 2px solid gray;
            padding: 35px;
            font-size: 30px;
            text-align: center;
         }
      </style>
   </head>
   <body>
      <h1>Game Board</h1>
      <div class = "container">
         <div class = "ele1">1</div>
         <div class = "ele2">2</div>
         <div class = "ele3">3</div>
         <div class = "ele4">4</div>
         <div class = "ele5">5</div>
         <div class = "ele6">6</div>
      </div>
   </body>
</html>