居中div子元素

Question

我有以下js-fiddle。它基本上只是一个div，它有一堆方形子元素。问题是div并不总是保持居中。我已经设置了以下CSS：

.boutique-grid {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

我不确定为什么它不以子元素div为中心。有什么想法吗？

Answer 1

从.boutique-grid-column类中删除float。它将解决问题。

Answer 2

boutique-grid居中，但它是100％宽。您可以将宽度设置为例如710px;

.boutique-grid {
  overflow: hidden;
  width: 710px;
}

Answer 3

设置div和image的宽度。

.boutique-grid {
    width: 300px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

Answer 4

.boutique-grid {
    text-align: center;    
}

.boutique-grid-column {
    ...
    margin: 0 auto;    
}

Answer 5

删除float:left;，这样可以正常工作，您已设置display:inline-block;，因此无需浮动元素。

http://jsfiddle.net/wy7rd/3/

Answer 6

这是the spec关于float所说的内容：

  

该元素生成一个浮动到左侧的块框。内容从盒子的右侧开始流动，从顶部开始（以'clear'属性为准）。

这就是.boutique-grid-column在指定float时变为阻止并忽略text-align的原因。