Nuxt CNode：Node.js专业中文社区

急，问一个CSS的问题

发布于 8 年前作者 lyt308012546 4057 次预览最后一次回复是 8 年前来自问答

在不改变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>

实际展示目标展示

8 回复

DevinXian

1楼•8 年前

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

lyt308012546

2楼•8 年前

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

lyt308012546

3楼•8 年前

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

foora

4楼•8 年前

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

lyt308012546

5楼•8 年前

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

hezhongfeng

6楼•8 年前

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

yangzichen987046

7楼•8 年前

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

Lizhooh

8楼•8 年前

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