Trouble centering divs within a row in brackets - html

Question

I'm trying to center 4 columns inside a a row. Trying in code pen or similar works like I want, but in adobe-brackets is not working, I don't know if there is a bug or something...
Does anyone has any idea?
PD.: in my brackets output, everything is on the left.
body {
position: relative;
}
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.container-fluid {
width: inherit;
height: inherit;
margin: 0;
padding: 0;
}
.content {
padding: 100px 0;
}
.content-2 {
color: violet;
background-color: blueviolet;
}
div.img {
margin: 5px;
float: center;
width: 180px;
}
div.img img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align: center;
}
.row-centered {
text-align: center;
}
.col-centered {
display: inline-block;
float: none;
margin-right: 0 auto;
width: 90%;
}
<section class="content content-2">
<div class="container">
<div class="row row-centered">
<div class="img col-md-2 col-centered">
<img src="forest.jpg" alt="Forest">
<div class="desc">
<h3>CREATIVIDAD</h3>
<p>hhhhhhhhhhhhhhhh</p>
</div>
</div>
<div class="img col-md-2 col-centered">
<img src="forest.jpg" alt="Forest">
<div class="desc">
<h3>DISEÑO</h3>
<p>hhhhhhhhhhh</p>
</div>
</div>
<div class="img col-md-2 col-centered">
<img src="forest.jpg" alt="Forest">
<div class="desc">
<h3>MULTIMEDIA</h3>
<p>hhhhhhhhhhhhh</p>
</div>
</div>
<div class="img col-md-2 col-centered">
<img src="forest.jpg" alt="Forest">
<div class="desc">
<h3>WEB</h3>
<p>hhhhhhhhhhh</p>
</div>
</div>
</div>
</div>
</section>

Answer 1

Use CSS Flexbox. Apply flexbox properties to .row-centered as well as .col-centered:
.row-centered {
display: flex; /* Flex Container */
flex-wrap: wrap; /* Wrap the content to next line if required */
justify-content: center; /* Horizontally content to center */
align-items: center;
}
.col-centered {
display: flex; /* Flex Container */
flex-direction: column; /* Flex Direction - Column */
justify-content: center; /* Vertically Center Alignment */
float: none;
margin-right: 0 auto;
width: 90%;
}
Have a look at this snippet below (use full screen):
body {
position: relative;
}
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.container-fluid {
width: inherit;
height: inherit;
margin: 0;
padding: 0;
}
.content {
padding: 100px 0;
}
.content-2 {
color: violet;
background-color: blueviolet;
}
div.img {
margin: 5px;
float: center;
width: 180px;
}
div.img img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align: center;
}
.row-centered {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.col-centered {
display: flex;
flex-direction: column;
justify-content: center;
float: none;
margin-right: 0 auto;
width: 90%;
}
<section class="content content-2">
<div class="container">
<div class="row row-centered">
<div class="img col-md-2 col-centered">
<img src="http://placehold.it/30x30" alt="Forest">
<div class="desc">
<h3>CREATIVIDAD</h3>
<p>hhhhhhhhhhhhhhhh</p>
</div>
</div>
<div class="img col-md-2 col-centered">
<img src="http://placehold.it/30x30" alt="Forest">
<div class="desc">
<h3>DISEÑO</h3>
<p>hhhhhhhhhhh</p>
</div>
</div>
<div class="img col-md-2 col-centered">
<img src="http://placehold.it/30x30" alt="Forest">
<div class="desc">
<h3>MULTIMEDIA</h3>
<p>hhhhhhhhhhhhh</p>
</div>
</div>
<div class="img col-md-2 col-centered">
<img src="http://placehold.it/30x30" alt="Forest">
<div class="desc">
<h3>WEB</h3>
<p>hhhhhhhhhhh</p>
</div>
</div>
</div>
</div>
</section>
Hope this helps!