Community Learn Tools Library Leisure

English

Home > Web Front-end > HTML Tutorial > Align flex items to center of container using CSS

Align flex items to center of container using CSS

WBOY

Release： 2023-09-19 14:57:04

forward

822 people have browsed it

Align flex items to center of container using CSS

Align flex items to the center using the justify-content property with a value of center.

Example

You can try running the following code to achieve the center value

Live Demonstration

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

Copy after login

The above is the detailed content of Align flex items to center of container using CSS. For more information, please follow other related articles on the PHP Chinese website!

Related labels：

css flex Alignment

source：tutorialspoint.com

Previous article：Zoom HTML5 canvas to mouse cursor Next article：How to find the name and version of a web browser using JavaScript?

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn