急，问一个CSS的问题
发布于 7 年前 作者 lyt308012546 3640 次浏览 来自 问答

在不改变HTML的情况下如何让上面3个和下面两个div居中。

   <style type="text/css">
      #footer {
        text-align: center;
        width: 180px;
        border: 1px solid #dddddd;
      }
      #footer div {
        width: 50px;
        border: 1px solid #dddddd;
      }
    </style>
  <div id="footer">
    <div>内容</div>
    <div>内容</div>
    <div>内容</div>
    <div>内容</div>
    <div>内容</div>
  </div>

实际展示 1.png 目标展示 2.png

8 回复

div 水平居中很简单吧，何况你这个有宽度的，直接margin:auto；垂直居中才是你需要琢磨的地方

@DevinXian 我的失误宽度写错了，宽度是180px，这样上面有3个DIV，下面有两个div，然后上面的一排居中，下面的一排居中。不能改HTML结构。

@DevinXian 放了两个图片，方便你理解问题。

1 
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>webpack-demo</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style type="text/css">
            #footer {
			  display: flex;
              display: -webkit-flex;
              flex-flow: row wrap;
              justify-content: center;
              width: 180px;
              border: 1px solid #dddddd;
			  text-align: center;
            }
            #footer div {
              width: 50px;
              border: 1px solid #dddddd;
            }
          </style>
    </head>
    <body>
            <div id="footer">
              <div>内容</div>
              <div>内容</div>
              <div>内容</div>
              <div>内容</div>
              <div>内容</div>
            </div>
    </body>
</html>

@foora nice，flex开始有想到，但是没敢用。

@lyt308012546 第一感觉就是flex，但是第一行不能太宽了，否则就不能3+2了

 #footer div {
        width: 50px;
        border: 1px solid #dddddd;
        margin: 0 auto;
        display: inline-block;
    }

用 display: inline-block;，楼上正解。

回到顶部