在未知大小的容器中居中多个 DIV答案

【问题标题】：Centering multiple DIVs inside container of unknown size在未知大小的容器中居中多个 DIV
【发布时间】：2014-10-18 19:57:35
【问题描述】：

我在一个未知大小的容器中有多个已知大小（180 x 180 像素）的蓝色 div。

<html>
    <head>
        <style>
            @import url('http://getbootstrap.com/dist/css/bootstrap.css');

            .content {
                border:1px solid black;
                background-color: grey;
                overflow:hidden;
                text-align:center;
            }

            .block {
                width: 180px;
                height: 180px;
                border: 1px solid black;
                background-color:blue;
                margin: 0 5px 5px 0;
                float:left;
            }
        </style>
    </head>

    <body>
        <div class="row">
            <div class="col-md-6">
                <div class="content">
                    <div class="block"></div>
                    <div class="block"></div>              
                    <div class="block"></div>
                    <div class="block"></div> 
                    <div class="block"></div>
                    <div class="block"></div>
                </div>
            </div>
        </div>
    </body>
</html>

这是我的fiddle。

我想知道将这些蓝色框居中的两种方法。

第一：

第二：

【问题讨论】：

标签： html css twitter-bootstrap center

【解决方案1】：

只需在块元素上使用inline-block。

.block {
    width: 180px;
    height: 180px;
    border: 1px solid black;
    background-color:blue;
    margin: 0 5px 5px 0;
    display:inline-block;
}

http://jsfiddle.net/52VtD/7656/

【讨论】：

正确答案（对于第二种情况），但他的结果显示 7 <div>, jsfiddle.net/52VtD/7656 与您显示结果相同的代码，因为如果向右扩展可以匹配第二个图像布局。
谢谢。你能告诉我第一种居中的方法吗？

【解决方案2】：

由于某种原因，我无法添加已编辑的小提琴。代码如下：

HTML：

<div class="row">
    <div class="col-md-12">
      <div class="content">
          <div class="box">
          <div class="block"></div>
          <div class="block"></div>              
          <div class="block"></div>
          <div class="block"></div> 
          <div class="block"></div>
          <div class="block"></div>
          <div class="block"></div>
      </div>
      </div>
    </div>
</div>

CSS：

@import url('http://getbootstrap.com/dist/css/bootstrap.css');

.content {
  border:1px solid black;
  background-color: grey;
  overflow:hidden;
  text-align:center;
  margin-left:10px;
}

.box {
    width:555px;
    margin:0 auto;
}

.block {
    width: 180px;
    height: 180px;
    border: 1px solid black;
    background-color:blue;
    margin: 0 5px 5px 0;
    display:inline-block;
    float:left;
}

【讨论】：

【解决方案3】：

第一种方式使用这个小提琴：

http://jsfiddle.net/52VtD/7656/

我创建了另一个 div，因此块居中。块的样式现在是：

.block {
    width: 180px;
    height: 180px;
    border: 1px solid black;
    background-color:blue;
    margin: 0 5px 5px 0;
    display:inline-block;
    float:left;
}

我添加的 div（类名为“box”）的样式是：

.box {
    width:555px;
    margin:0 auto;
}

【讨论】：

我认为你不小心从 Kiee 的回答中粘贴了小提琴。
哎呀，我确实做到了。很抱歉。