关于水平居中

居中布局技巧

最新推荐文章于 2024-09-19 10:51:08 发布

weixin_33982670

最新推荐文章于 2024-09-19 10:51:08 发布

阅读量58

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/chayangge/p/4288681.html

本文介绍两种使多个块级元素水平居中的方法：一种是通过将子元素设置为inline-block，并在父元素上应用text-align:center；另一种是使用flex布局，设置display:flex及justify-content:center。

单个div都知道用margin ：XX px auto;来实现，但对于多个块级元素呢？那就把这些块级元素如div设置为display:inline-block;再把父元素设置为text-align:center;即可。text-align:center;本是用于设置父元素中的文本的，这里一旦把子块级元素设为inlin-block后一样有效。

还有一种新方法：

那就是把父元素设为display: flex; 且justify-content:center。（新属性需要新浏览器哦）

<html>
<head>
    <title></title>
    <style>
    body{
        color:#333;
        font-size:12px;
        display: flex;    
        justify-content:center    
    }
    div{
       
        width: 200px;
        height: 200px;
        
   
    }
    #d1{
         background: red;
    }
    #d2{
         background: blue;
    }
    #d3{
         background: yellow;
    }

    </style>
    <script>

    </script>
</head>
<body>
  <div id='d1'></div>
  <div id='d2'></div>
  <div id='d3'></div>
</body>
</html>

很简单，就不上图啦。

转载于:https://www.cnblogs.com/chayangge/p/4288681.html