跳到主要内容
CNode
首页/问答

急，问一个CSS的问题

问答
Llyt308012546发布于 9 年前最后回复 9 年前
842260

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

L
Lizhooh#89 年前

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

Y
yangzichen987046#79 年前
 #footer div {
        width: 50px;
        border: 1px solid #dddddd;
        margin: 0 auto;
        display: inline-block;
    }
H
hezhongfeng#69 年前
引用 lyt308012546@foora nice，flex开始有想到，但是没敢用。

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

L
lyt308012546#59 年前
引用 foora

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

F
foora#49 年前
<!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>
L
lyt308012546#39 年前
引用 DevinXiandiv 水平居中很简单吧，何况你这个有宽度的，直接margin:auto；垂直居中才是你需要琢磨的地方

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

L
lyt308012546#29 年前
引用 DevinXiandiv 水平居中很简单吧，何况你这个有宽度的，直接margin:auto；垂直居中才是你需要琢磨的地方

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

D
DevinXian#19 年前

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

参与回复

登录后即可参与回复。登录