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

Question

我有一个包含 4 个以页面为中心的内部 div 的 Bootstrap 容器(这些在我的实际 Web 应用程序中动态呈现)。在某些情况下，我只呈现 3 个内部 div，但是当我删除其中 1 个段落时，容器中的剩余内容会向左浮动(由于 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/

Answer 1

添加

.container {
    text-align: center;
}

并删除所有地方的 float: left;。取而代之的是让 div-s 表现得像带有 display: inline-block; 的内联元素，对于 .expertise_div - 它们将始终居中作为内联元素.容器。此外，考虑到元素的可变数量，您还必须针对每个视口(viewport)大小改进有关元素边距的样式。 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>