0

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

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

我不确定为什么它没有将子元素 div 居中。任何想法？

4

6 回答 6

3

从 .boutique-grid-column 类中删除左侧的浮动。它将解决问题。

于 2013-09-17T07:00:25.867 回答
0

boutique-grid居中，但宽度为 100% 。例如，您可以将宽度设置为 710px；

.boutique-grid {
  overflow: hidden;
  width: 710px;
}
于 2013-09-17T07:03:34.673 回答
0

div设置和的宽度image。

.boutique-grid {
    width: 300px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}
于 2013-09-17T07:03:56.167 回答
0 
.boutique-grid {
    text-align: center;    
}

.boutique-grid-column {
    ...
    margin: 0 auto;    
}
于 2013-09-17T07:07:36.597 回答
0

删除float:left;，这会很好，你已经display:inline-block;设置了所以不需要浮动元素。

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

于 2013-09-17T07:13:40.340 回答
0

这就是规范所说的float：

该元素生成一个向左浮动的块框。内容在框的右侧流动，从顶部开始（受“清除”属性的影响）。

这就是为什么在指定和忽略.boutique-grid-column时变成阻塞。floattext-align

于 2013-09-17T07:23:02.927 回答