search

Home >Web Front-end >CSS Tutorial >CSS adjust content

CSS adjust content

王林
王林forward
2023-09-17 11:45:04797browse

CSS 调整内容

Align Flex items using the justify-content property. You can try running the following code to implement the justify-content property:

Example

Live Demonstration

<!DOCTYPE html>
<html>
   <head>
      <style>
         .mycontainer {
            display: flex;
            background-color: orange;
            justify-content: center;
         }
         .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>

The above is the detailed content of CSS adjust content. For more information, please follow other related articles on the PHP Chinese website!

css flex
Statement：
This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete
Previous article：Align Flex items to middle of container in CSSNext article：Align Flex items to middle of container in CSS

Related articles

See more