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

Căn chỉnh linh hoạt các mục ở tâm của vùng chứa bằng CSS


Sử dụng justify-content tài sản có giá trị trung tâm để căn chỉnh các mục linh hoạt cho chính giữa.

Ví dụ

Bạn có thể thử chạy mã sau để triển khai giá trị trung tâm

<!DOCTYPE html>
<html>
   <head>
      <style>
         .mycontainer {
            display: flex;
            background-color: red;
            justify-content: center;
         }
         .mycontainer > div {
            background-color: #F1C40F;
            text-align: center;
            line-height: 60px;
            font-size: 30px;
            width: 100px;
            margin: 5px;
         }
      </style>
   </head>
   <body>
      <h1>Quiz</h1>
      <div class = "mycontainer">
         <div>Q1</div>
         <div>Q2</div>
         <div>Q3</div>
         <div>Q4</div>
      </div>
   </body>
</html>