我需要inner_holder的宽度为960px,我需要它居中.我尝试使用宽度：960px和margin：0px auto但它不起作用.我怎样才能将div放在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;
- }
解决方法
正如你所能看到的那样,“包含浮动元素的div”实际上位于中心(红色).
我假设您想要将浮动元素本身居中,而不是它们的父级.我担心你不能这样做(据我所知).但是,如果您不依赖于实际浮动的元素,您可能只想将.colum显示为内联块,并将text-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
- }
