Html 在大小未知的容器内对中多个div_Html_Css_Twitter Bootstrap_Center

Html 在大小未知的容器内对中多个div

html css twitter-bootstrap

Html 在大小未知的容器内对中多个div,html,css,twitter-bootstrap,center,Html,Css,Twitter Bootstrap,Center,我有多个已知大小的蓝色div（180 x 180 px）在一个未知大小的容器中 <html> <head> <style> @import url('http://getbootstrap.com/dist/css/bootstrap.css'); .content { border:1px solid black; bac

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

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


@导入url（'http://getbootstrap.com/dist/css/bootstrap.css');
.内容{
边框：1px纯黑；
背景颜色：灰色；
溢出：隐藏；
文本对齐：居中；
}
.街区{
宽度：180px；
高度：180像素；
边框：1px纯黑；
背景颜色：蓝色；
边距：0 5px 5px 0；
浮动：左；
}

这是我的

我想知道两种使这些蓝色盒子居中的方法

第一:

第二：

只需在块元素上使用

内联块

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

只需在块元素上使用

内联块

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

第一种方法是使用这把小提琴：

我创建了另一个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”）的样式是：

第一种方法是使用此小提琴：

我创建了另一个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”）的样式是：

由于某种原因，我不能加上旋转的小提琴。下面是代码：

HTML:

由于某种原因，我不能加上旋转的小提琴。下面是代码：

HTML:

回答正确（对于第二种情况），但他的结果显示7

，与您刚才显示的代码相同，如果扩展到右侧，结果会更好地匹配第二个图像布局。谢谢。你能告诉我第一种居中方式吗？回答正确（第二种情况），但他的结果显示7

，与你刚才的代码相同，如果扩展到右侧，结果会更好地显示，因为可以匹配第二个图像布局。谢谢。你能告诉我第一种居中的方法吗？我想你不小心粘上了Kiee答案中的小提琴。哎呀，我确实粘上了。很抱歉。我想你不小心把Kiee的答案上的提琴贴上了。哎呀，我确实贴了。对不起。

@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;
}