在未知大小的容器中居中多个 DIV
Posted
技术标签:
【中文标题】在未知大小的容器中居中多个 DIV【英文标题】：Centering multiple DIVs inside container of unknown size 【发布时间】：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。
我想知道将这些蓝色框居中的两种方法。
第一：
第二：
【问题讨论】：
【参考方案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 的回答中粘贴了小提琴。 哎呀，我确实做到了。很抱歉。以上是关于在未知大小的容器中居中多个 DIV的主要内容，如果未能解决你的问题，请参考以下文章