Question

我想让一些div框居中，但我尝试过没有任何工作。因为它有相当多的代码，我将在网站上发布链接：

http://www.klodel.com/test.html

目标是将彩色框放在灰色框的中间。

margin-left:auto;
margin-right:auto;

可以在FULL灰色框上工作，但不能在＆＃34;技能框＆＃34;这是四个彩色的容器。

这里的代码： HTML：

<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet' href='style.css'/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src='script.js'></script>
</head>
<body>
<div class="pagebox">
    <div class="skillbox">
        <div class="flatbox flatbox-me">
            <div class="flatbox-image">
                <img style="width:64px; height:64px;" src="placeholder.png">
            </div>
            <div class="flatbox-title">
                <p>Ich mit mir</p>
             </div>
        </div>

        <div class="flatbox flatbox-you">
            <div class="flatbox-image">
                <img style="width:64px; height:64px;" src="placeholder.png">
            </div>
            <div class="flatbox-title">
                <p>Ich mit dir</p>
             </div>
        </div>

        <div class="flatbox flatbox-team">
            <div class="flatbox-image">
                <img style="width:64px; height:64px;" src="placeholder.png">
            </div>
            <div class="flatbox-title">
                <p>Ich im Team</p>
             </div>

        </div>

        <div class="flatbox flatbox-leadership">
            <div class="flatbox-image">
                <img style="width:64px; height:64px;" src="placeholder.png">
            </div>
            <div class="flatbox-title">
                <p>Leadership</p>
             </div>
        </div>
    </div>
</div>
</body>
</html>

CSS：

*
{
  margin: 0;
  padding: 0;
}

.pagebox
{
  width:900px;
  height:800px;
  background-color:#bdc3c7;
  margin-left:auto;
  margin-right:auto;
}

.skillbox
{
  width:900px;
  margin-left:auto;
  margin-right:auto;
}

.flatbox 
{
  width: 100px;
  height: 100px;
  float:left;
  top:30px;
}

.flatbox p
{
  color: #fff;
}

.flatbox-image
{
  top: 0;
  left: 0;
  margin-top: 18px;
  width: 100px;
  height: 64px;
  text-align: center;
}

.flatbox-title
{  
  width: 100px;
  height: 100px;
  margin-top: 0;
  text-align: center;
}

.flatbox-me
{  
  width: 100px;
  background-color: #e74c3c;
  height: 100px;
  top: 0;
  left: 0;
}

.flatbox-you
{  
  width: 100px;
  background-color: #2ecc71;
  height: 100px;
  margin-left:8px;
}

.flatbox-team
{  
  width: 100px;
  background-color: #3498db;
  height: 100px;
  margin-left:8px;
}

.flatbox-leadership
{  
  width: 100px;
  background-color: #e67e22;
  height: 100px;
  margin-left:8px;
}

Answer 1

以什么方式居中？水平？垂直？都？这是一种水平居中的简单方法：

.skillbox {text-align: center;}

.flatbox {display: inline-block; float: none;}

（当然，float: none只是为了覆盖你拥有的浮动。只需将它们全部拿出来。）

以div为中心的定位问题

1 个答案: