html - 我需要将本节中的三个div居中

我需要将节中的三个div放在节的中间；他们现在离左边太远了。

<section class="support-feat clearfix">
<div class="container-fluid">
<div class="row box">
<div class="block about-feature-1 wow fadeInDown" data-wow-duration="500ms"   data-wow-delay=".3s">
<h2>
text, Lorem ipsum dolor
</h2>
<p>
sit amet, quam donec libero suspendisse vel, neque nunc vel, donec massa   turpis rutrum mauris, quam enim in dui sit penatibus ipsum, ut lacus lobortis.    Vestibulum phasellus metus pellentesque<br>sit amet, quam donec libero    suspendisse vel, neque nunc vel, donec massa turpis rutrum mauris, quam enim in dui sit penatibus ipsum, ut lacus lobortis. Vestibulum phasellus metus pellentesque

</p>
</div>
<div class="block about-feature-2 wow fadeInDown" data-wow-duration="500ms" data-wow-delay=".5s">
<h2 class="item_title">
                      text, Lorem ipsum dolor
</h2>
<p>

sit amet, quam donec libero suspendisse vel, neque nunc vel,
donec massa turpis rutrum mauris, quam enim in dui sit
penatibus ipsum, ut lacus lobortis. Vestibulum phasellus metus pellentesque<br>sit amet, quam donec libero suspendisse vel, neque nunc vel, donec massa turpis rutrum mauris, quam enim in dui sit
penatibus ipsum, ut lacus lobortis. Vestibulum phasellus metus pellentesque<br>

penatibus ipsum, ut lacus lobortis. Vestibulum phasellus metus pellentesque

</p>
</div>
<div class="block about-feature-3 wow fadeInDown" data-wow-duration="500ms" data-wow-delay=".7s">
<h2 class="item_title">
                      text, Lorem ipsum dolor
</h2>
<p>
    sit amet, quam donec libero suspendisse vel, neque nunc vel, donec massa turpis rutrum mauris, quam enim in dui sit penatibus ipsum, ut lacus lobortis. Vestibulum phasellus metus pellentesque<br>

sit amet, quam donec libero suspendisse vel, neque nunc vel, donec massa turpis rutrum mauris, quam enim in dui sit penatibus ipsum, ut lacus lobortis. Vestibulum phasellus metus pellentesque

</p>
</div>
</div>
</div>
</section>



.support-feat {
text-align: center;
margin: 2%
}

.support-feat .block {
color: #1c1c1c;
flex: 2;
min-width: 340px;
max-width: 400px;
box-sizing: border-box;
}

.support-feat .block p {
font-weight: 300;
font-size: 140%
}

.support-feat h2 {
font-size: 200%
}

.support-feat .about-feature-1 {
padding: 20px;
background: #fff;
border: solid;
border-color: #17b6ea;
margin: 2%
}

.support-feat .about-feature-2 {
padding: 20px;
background: #fff;
border: solid;
border-color: #17b6ea;
margin: 2%
}

.support-feat .about-feature-3 {
padding: 20px;
background: #fff;
border: solid;
border-color: #17b6ea;
margin: 2%
}

 Here's an image to explain what's going on and what I'm trying to do;

基本上，我正在尝试执行此操作：https://www.tvlift.com/support/technical-support/

最佳答案

您可以利用bootstraps 12列网格系统来完成此操作...在https://jsfiddle.net/gumctejp/下查看我的jsfiddle

基本上，您将格式化页面组件以适合Bootstraps网格系统的上下文。

一个非常简单的示例如下所示：

  <div class="row text-center">
    <div class="col-sm-3">
    </div>
    <div class="col-sm-2 box">
      one box
    </div>
    <div class="col-sm-2 box">
      two box
    </div>
    <div class="col-sm-2 box">
      three box
    </div>
    <div class="col-sm-3">
    </div>
  </div>

有关Boostraps网格系统的官方文档，请参见http://getbootstrap.com/css/

关于html - 我需要将本节中的三个div居中，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/36435425/