我需要在该部分中的三个div居中

Question

我需要将该部分中的三个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/

Answer 1

您可以使用bootstraps 12列网格系统来完成此任务...查看我的jsfiddle https://jsfiddle.net/gumctejp/

基本上，您将格式化页面组件以适应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/

Answer 2

据我所知，您希望拥有居中的浮动物品。这可以通过一些基本的css来实现：

HTML：

<div class="row">
   <div class="col-xs-12 text-center">
    <div class="floating-center">
        Whatever content in here
    </div>
   </div>
</div>

使用引导网格系统时，请务必使用所有必需元素（在代码中，列元素丢失，有时会导致毛刺）。

浮动元素的CSS：

.text-center {
   text-align: center;
}

.floating-center {
    position: relative;
    width: 500px;
    height: auto;
    margin: 5px; /*Whatever margin each element should have*/
    display: inline-block; /*This is mainly doing the magic */
}

编辑：

添加了一个显示效果的plunker：https://plnkr.co/edit/vGKHW8Pa1tw2RLlmj4BI?p=preview

注意：这是如何使div居中。设备相关的宽度可以用css @media属性实现。