Question

我试图将一块浮动的div中心化。我希望div总是居中。

我创造了一个小提琴：

这是我的代码。

HTML

<div class="container">
    <section id="works">
        <div class="row text-center" style="background-color:#015891; margin-bottom:10px; color:white; padding:10px;">WORKS</div>
        <div id="boxWrap">
            <div class="view"></div>
            <div class="view"></div>
            <div class="view"></div>
            <div class="view"></div>
        </div>
    </section>
</div>

CSS

.view {
   width: 300px;
   height: 200px;
   margin: 0 15px 15px auto;
   float: left;
   overflow: hidden;
   position: relative; 
   background:black;
}

#boxWrap {
 margin:0 auto;
 text-align:center;
}

谢谢，弗朗西斯

Answer 1

您的小提琴不包含您的代码，但

I updated it here

将您的.view课程更改为以下内容（删除float: left;，position:relative并添加margin-left: auto，margin-right: auto：

.view {
   width: 300px;
   height: 200px;
   margin-top: 15px;
   margin-bottom: 15px;
   margin-left: auto; //add this
   margin-right: auto; //add this
   overflow: hidden;
   background:black;  
}

Answer 2

我建议使用display:table和clear:float这样的替代方案：

<强> CSS

.view {
   width: 300px;
   height: 200px;  
   float: left;
   overflow: hidden;
   position: relative; 
   background:black;
   display:table-cell;
}

#boxWrap {
   margin:0 auto;
   display:table;
}

.view:nth-child(2n+1){
   clear: left;
   margin: 0 15px 15px auto;
}

仅在第一个上应用保证金。

JSfiddle

Bootstrap中心浮动div

2 个答案:

I updated it here