急,问一个CSS的问题
发布于 13 天前 作者 lyt308012546 509 次浏览 最后一次编辑是 12 天前 来自 问答

在不改变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 放了两个图片,方便你理解问题。

<!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;,楼上正解。

回到顶部