PHP前端开发

在 CSS 中将 Flex 项目对齐在容器的中间

百变鹏仔 4周前 (09-19) #CSS
文章标签 中将

使用 align-items属性,值为 center,将弹性项居中对齐。

示例

您可以尝试运行以下代码来实现center值

实时演示

<!DOCTYPE html><html>   <head>      <style>         .mycontainer {            display: flex;            background-color: orange;            align-items: center;            height: 150px;            width: 600px;         }         .mycontainer > div {            background-color: white;            text-align: center;            line-height: 40px;            font-size: 25px;            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>