I need the three div in the section to be centered

Question

I need the three div in the section to be centered in the middle of the section; they are off too the left too far right now.

<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;

basically I'm trying to do what this does: https://www.tvlift.com/support/technical-support/

Try flexbox's `justify-content: center`: http://stackoverflow.com/a/32122011/3597276 — Michael Benjamin, Apr 05 '16 at 22:31

Maxwelll · Answer 1 · 2016-04-05T21:02:01.543

You can utilize bootstraps 12-column grid system to accomplish this... check out my jsfiddle below https://jsfiddle.net/gumctejp/

Basically you will format your page component to fit within the context of bootstraps grid system.

A really simple example would look like:

  <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>

See http://getbootstrap.com/css/ for the official documentation on boostraps grid system

Joschka Sondhof · Answer 2 · 2016-04-05T21:54:57.297

As far as I understood, you wish to have centered floating items. This can be realized with some basic css:

HTML:

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

Be sure to have all required elements in place when working with the bootstrap grid system (in your code, the column element was missing, leading to glitches sometimes).

CSS for the floating elements:

.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 */
}

EDIT:

Added a plunker to show the effect: https://plnkr.co/edit/vGKHW8Pa1tw2RLlmj4BI?p=preview

Note: This is how to center the divs. Device dependant widths can be realized with css @media attribute.

that didn't do it. I'm going to post image that will describe what I need to do — Classics07, Apr 05 '16 at 20:06
Added a plunker to show the effect of centering. As mentioned in the edit, widths can by dynamically managed with css @media properties. Even if it's not what you expect, no need for a downvote - wouldn't make sense to answer any questions otherwise, would it? — Joschka Sondhof, Apr 05 '16 at 21:57

I need the three div in the section to be centered

2 Answers2