6

I need inner_holder to have width of 960px and I need it to be centered. I tried using width: 960px and margin: 0px auto but it doesn't work. How can I center the divs inside inner_holder?

HTML:

<div class="parent_container">
    <div class="inner_holder">
        <div class="column column1">
            <div class="inner_clip"></div>
        </div>
        <div class="column column2">
            <div class="inner_clip"></div>
        </div>
        <div class="column column3">
            <div class="inner_clip"></div>
        </div>
    </div>
</div>

CSS:

.parent_container {
      height: auto;
      margin: 15px auto;
      min-height: 500px;
      width: 960px;
}
.column {
     float: left;
     margin-right: 50px;
}
.inner_clip {
    background-color: #333333;
    height: 250px;
    margin-bottom: 20px;
    width: 250px;
}
4

2 回答 2

9

正如您在此处看到的，“包含浮动元素的 div”实际上位于中心（红色）。

我假设您想将浮动元素本身而不是它们的父元素居中。恐怕你不能这样做（据我所知）。但是，如果您实际上并不依赖于您的元素float，那么您可能只想将display您的as.colum设置为父级。inline-blocktext-align:center

对 CSS 的更改：

.parent_container {
    text-align:center;     // added
}
.column {
    display: inline-block; // added
    margin: 0 25px;        // added
    float: left;           // removed
    margin-right: 50px;    // removed
}

Result as Fiddle

于 2013-09-09T18:59:18.327 回答
0

我拼命想永远解决这个问题。上面关于将“display：inline-block”分配给 div 中的元素，然后将“text-align：center”分配给父 div 的答案是有效的，但是但是......我有一类“clearfix”在我的显然是把整个事情搞砸的父 div。一旦我删除了那个 clearfix 类，一切都很好地集中在一起（当然，经过数小时的徒劳挫折；）。希望这可以帮助某人。

于 2015-04-03T00:29:24.313 回答