首頁 > web前端 > html教學 > 使用CSS將flex項目對齊到容器的中心

使用CSS將flex項目對齊到容器的中心

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
發布: 2023-09-19 14:57:04
轉載
908 人瀏覽過

使用CSS將flex項目對齊到容器的中心

使用值為 centerjustify-content 屬性將彈性項目對齊到中心。

範例

您可以嘗試執行以下程式碼來實作中心值

現場示範

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

<!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>

登入後複製

以上是使用CSS將flex項目對齊到容器的中心的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板