Question

我有以下问题。我有一个响应的容器，所以它将是浏览器的宽度。或者当浏览器足够大时，旁边会显示一个侧边栏。

在这个div中，我有大约10个带有以下css的项目：

display:block;
width:200px;
height: 200px;
background: tomato;
margin: 10px;
float:left;

所以他们形成一个网格。

此时发生的情况是，当容器div的宽度为440px时。它们将在每排上很好地显示2。但是当容器的宽度例如是600时。还有2个在左边有一个大的白色区域。

现在我想把它们集中起来。所以2应该集中在容器中。我想我会通过添加另一个容器来扭曲元素并给它一个余量：auto;但那不起作用：

小提琴：http://jsfiddle.net/kqvcnugs/

那么如何确保项目始终位于中间？

提前感谢！

Answer 1

你是说这个意思吗？ http://jsfiddle.net/kqvcnugs/7/

在您的情况下，只需设置为 a display: inline-block;和父div text-align: center;

但简短说明是：

.parent { text-align: center; }
.children { display: inline-block; }

祝你好运！：）

像这样：stackoverflow post

Answer 2

您可以使用CSS3 flexible box layout。

justify-content: center将对齐它中心水平。
flex-wrap: wrap将确保阻止换行到下一行而不是调整大小。

＆＃13;

body {
  width: 100%;
  background: blue;
}
div {
  background: red;
  overflow: hidden;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
a {
  display: block;
  width: 200px;
  height: 200px;
  background: tomato;
  margin: 10px;
  float: left;
}

＆＃13;

<body>
  <div>
    <a></a>
    <a></a>
    <a></a>
    <a></a>
    <a></a>
    <a></a>
  </div>
</body>

＆＃13;

Answer 3

您可以使用float，然后将display:inline-block;提供给父元素，而不是使用text-align:center;。

＆＃13;

body{
    width: 100%;
    background: blue;
}
div {
   background: red;
   overflow:hidden;
  /* Add text-align:center; */
    text-align: center;
}

a{
    /* Change to display:inline-block; remove float */
    display:inline-block;
    width:200px;
    height: 200px;
    background: tomato;
    margin: 10px;
}

＆＃13;

<body>
<div>
    <a></a>
    <a></a> 
    <a></a> 
    <a></a> 
    <a></a> 
    <a></a> 
</div>
</body>

＆＃13;

Jsfiddle

Answer 4

你可以尝试这个：

body{
    width: 100%;
    background: blue;
}
div {
   background: red;
   overflow:hidden;
    text-align: center;
}

a{
    display:inline-block;
    width:200px;
    height: 200px;
    background: tomato;
    margin: 10px;


}

DEMO HERE

制作内容中心

4 个答案: