在容器中居中可变数量的div

时间：2017-10-31 19:24:40

标签： html css twitter-bootstrap-3

我有一个Bootstrap容器，其中包含4个以页面为中心的内部div（这些在我的实际Web应用程序中动态呈现）。在某些情况下，我只渲染3个内部div，但是当我删除其中一个段落时，容器中的剩余内容浮动到左侧（由于css中的float标记）。如何将3个段落居中而不是让它们向左浮动？

<div class="expertise_section text-center">
<div class="row">
<div class="container">
<h2>Centered Headline</h2>
<div class="expertise_section_inner row">
</div>

<!-- ***** if the below is removed, the remaining 3 divs do not center correctly -->
<div class="expertise_div blue_div" >
<div class="expertise_content">
<p>Paragraph 1...</p>
</div>
<a href="https://www.jsfiddle.net" target="_blank">READ MORE</a></div>

<div class="expertise_div green_div" >
<div class="expertise_content">
<p>Paragraph 2...</p>
</div>
<a href="https://www.jsfiddle.net" target="_blank">READ MORE</a></div>

<div class="expertise_div maroon_div">
<div class="expertise_content">
<p>Paragraph 3...</p>
</div>
<a href="https://www.jsfiddle.net" target="_blank">READ MORE</a></div>

<div class="expertise_div orange_div">
<div class="expertise_content">
<p>Paragraph 4...</p>
</div>
<a href="https://www.jsfiddle.net" target="_blank">READ MORE</a></div>

</div>
</div>
</div>

CSS如下：

@charset "utf-8";

.expertise_section {
    padding: 85px 0;
}
.expertise_section h2 {
    font-weight:500;
    margin-top:7px;
}
.expertise_div {  
  float: left;
    width: 24.2%;
    margin-right:1.05%;
}
.expertise_div:nth-child(4n+4) {
    margin-right:0px;
}
.expertise_div p {
    font-family: 'Open Sans', sans-serif;
    color: #6c6c6c;
    font-weight: 300;
}
.expertise_content {
    border-bottom: 2px solid #45acba;
    border-top: 2px solid #45acba;
    margin: 18px 0;
    padding: 26px 0;
}
.expertise_content p:last-child {
    margin-bottom:2px;
}
.expertise_div a {
  color: #3a9cab;
  font-size: 14px;
  font-weight: 500;
}
.expertise_section_inner {
    margin-top:36px;
}
.green_div .expertise_content {
    border-color:#8ebb29;
}
.green_div a {
    color:#8ebb29;
}
.maroon_div .expertise_content {
    border-color:#81515d;
}
.maroon_div a {
    color:#81515d;
}
.orange_div .expertise_content {
    border-color:#d86435;
}
.orange_div a {
    color:#d86435;
}
.show_1023 {
    display:none;
}

@media only screen and (max-width: 1199px) {
    .container {
        padding:0px 35px !important;
    }
}
@media only screen and (max-width: 1023px) {
    .expertise_div {
        float: left;
        margin-right: 3.2%;
        width: 48%;
        margin-bottom:53px;
    }
    .expertise_div:nth-child(2n+2) {
        margin-right: 0;
    }
    .expertise_section {
        padding: 85px 0 30px;
    }
    .expertise_section_inner {
        padding: 0 101px;
    }
    header {
        padding: 20px 15px;
    }
}

@media only screen and (max-width: 951px) {
  .container {
        padding: 0 30px !important;
    text-align: center;
    }
}

@media only screen and (max-width: 767px) {
    .container {
        padding: 0 30px !important;
    text-align: center;
    }
    .expertise_section {
        padding: 78px 0 45px;
    }
    .expertise_div {
        width:100%;
        margin-right:0px;
        margin-bottom:31px;
    }
    .expertise_section_inner {
        padding: 0;
        margin-top:33px;
    }
    .hide_767 {
        display:none;
    }
    .show_767 {
        display:block;
    }
}

@media only screen and (max-width: 479px) {
    .container {
        padding: 0 30px !important;
    text-align: center;
    }
    .hide_480 {
        display:none !important;
    }
    .show_479 {
        display:block !important;
    }
}

jsfiddle在这里：https://jsfiddle.net/PaulPerkins/4zh6k6oL/2/

2 个答案:

答案 0 :(得分：2)

添加

.container {
    text-align: center;
}

并删除float: left;无处不在。相反，使div - 的行为类似于display: inline-block; .expertise_div的内联元素 - 它们将始终居中为.container的内联元素。此外，您还必须考虑到可变数量的元素，针对每个视口大小细化有关元素边距的样式。如果不想担心所有这些边距和案例，Flex Box Layout可能是另一种选择。

@charset "utf-8";
.container {
   text-align: center;
}
.expertise_section {
    padding: 85px 0;
}
.expertise_section h2 {
    font-weight:500;
    margin-top:7px;
}
.expertise_div {  
    display: inline-block;
    width: 24.2%;
    margin-right:1.05%;
}
.expertise_div:nth-child(4n+4) {
    margin-right:0px;
}
.expertise_div p {
    font-family: 'Open Sans', sans-serif;
    color: #6c6c6c;
    font-weight: 300;
}
.expertise_content {
    border-bottom: 2px solid #45acba;
    border-top: 2px solid #45acba;
    margin: 18px 0;
    padding: 26px 0;
}
.expertise_content p:last-child {
    margin-bottom:2px;
}
.expertise_div a {
  color: #3a9cab;
  font-size: 14px;
  font-weight: 500;
}
.expertise_section_inner {
    margin-top:36px;
}
.green_div .expertise_content {
    border-color:#8ebb29;
}
.green_div a {
    color:#8ebb29;
}
.maroon_div .expertise_content {
    border-color:#81515d;
}
.maroon_div a {
    color:#81515d;
}
.orange_div .expertise_content {
    border-color:#d86435;
}
.orange_div a {
    color:#d86435;
}
.show_1023 {
    display:none;
}

@media only screen and (max-width: 1199px) {
    .container {
        padding:0px 35px !important;
    }
}
@media only screen and (max-width: 1023px) {
    .expertise_div {
        margin-right: 3.2%;
        width: 48%;
        margin-bottom:53px;
    }
    .expertise_div:nth-child(2n+2) {
        margin-right: 0;
    }
    .expertise_section {
        padding: 85px 0 30px;
    }
    .expertise_section_inner {
        padding: 0 101px;
    }
    header {
        padding: 20px 15px;
    }
}

@media only screen and (max-width: 951px) {
  .container {
        padding: 0 30px !important;
    text-align: center;
    }
}

@media only screen and (max-width: 767px) {
    .container {
        padding: 0 30px !important;
    text-align: center;
    }
    .expertise_section {
        padding: 78px 0 45px;
    }
    .expertise_div {
        width:100%;
        margin-right:0px;
        margin-bottom:31px;
    }
    .expertise_section_inner {
        padding: 0;
        margin-top:33px;
    }
    .hide_767 {
        display:none;
    }
    .show_767 {
        display:block;
    }
}

@media only screen and (max-width: 479px) {
    .container {
        padding: 0 30px !important;
    text-align: center;
    }
    .hide_480 {
        display:none !important;
    }
    .show_479 {
        display:block !important;
    }
}
<div class="expertise_section text-center">
<div class="row">
<div class="container">
<h2>Centered Headline</h2>
<div class="expertise_section_inner row">
</div>

<!-- ***** if the below is removed, the remaining 3 divs do not center correctly -->
<div class="expertise_div blue_div" >
<div class="expertise_content">
<p>Paragraph 1...</p>
</div>
<a href="https://www.jsfiddle.net" target="_blank">READ MORE</a></div>

<div class="expertise_div green_div" >
<div class="expertise_content">
<p>Paragraph 2...</p>
</div>
<a href="https://www.jsfiddle.net" target="_blank">READ MORE</a></div>

<div class="expertise_div maroon_div">
<div class="expertise_content">
<p>Paragraph 3...</p>
</div>
<a href="https://www.jsfiddle.net" target="_blank">READ MORE</a></div>



</div>
</div>
</div>

答案 1 :(得分：1)

您不能将具有 float：left 属性的元素居中。

您可以做的是将元素渲染为内联块，并在封装器上使用 text-align：center 。

跟随这个小提琴：

HTML：

<div class="wrapper">
  <div class="boxes">
    <div class="box">
    </div>
    <div class="box">
    </div>
    <div class="box">
    </div>
  </div>
</div>

CSS：

.wrapper{
  width: 600px;
  margin: 0 auto;
  font-size: 0;
  text-align: center;
}

.boxes{
  width: 100%:
}

.box{
  font-size: 0;
  width: 250px;
  height: 150px;
  background: #fff;
  border: 1px solid #eee;
  display: inline-block;
}

http://jsfiddle.net/nftxsw7h/

相关问题
最新问题