senty senty - 10 months ago 74
CSS Question

Horizontally center 3 divs of 3 cols

I have a scenario where I need to center 3 divs of col3 in a row. When calculating, the answer shows 1.5, but what is the proper way of overcoming this challenge?

<div class="row">
<div class="col-md-offset-2 col-md-3" style="height: 50px; background-color: red">

<div class="col-md-3" style="height: 50px; background-color: green">

<div class="col-md-3" style="height: 50px; background-color: orange">

Here is a fiddle:

is messing this up because it leaves
for the other end. If there was
that would be brilliant but apparently no :(

I tried adding paddings and margins and it started becoming very messy, and thought I am directing to the wrong way.

What is the proper way of center the 3 divs without any hacky way?

Answer Source

I've come to a solution by erasing the offset class from the first inner div, assigning that particular .row container an additional class (.x in my example) and adding the following CSS for that class:

.x {
  width: 100%;
  margin: 0 12.5%;

Here is a codepen with the complete code: