Quiero centrar los círculos dentro de un col-md-12
lo malo es que cuando le pongo margin:auto
no permite el espacio entre ellos:
Ya intente con display:flex
y no se puede, y tampoco con margin:auto
.
Éste es el resultado esperado:
Les comparto mi código:
:root {
--main-blue: #161A41;
--medium-blue: #475070;
--light-blue: #8185A7;
--light-gray: #c9c9c9;
--extra-blue: #68b9e3;
}
/* navbar */
.navbar {
border: 0px;
margin-bottom: 0.1428em;
}
.navbar-default .navbar-nav>li>a {
color: #fff;
padding: 0.8333em;
}
.navbar-default .navbar-nav>li>a:hover {
color: var(--light-gray);
}
.upper-menu {
background-color: var(--main-blue);
font-size: 0.8571em;
padding: 0 8.3333em 0 12em;
}
.main-menu {
background-color: var(--medium-blue);
font-size: 1em;
padding-top: 1.0714em;
padding-bottom: 0.7142em;
}
.navbar-default .navbar-nav>.active>a {
background-color: transparent;
border-bottom: solid;
border-color: var(--light-blue);
color: #fff;
border-width: 2px;
}
.navbar-default .navbar-nav>.active>a:hover {
background-color: transparent;
color: var(--light-gray);
}
.navbar-default .navbar-nav>li>a:focus,
.navbar-default .navbar-nav>.active>a:focus {
background-color: transparent;
color: var(--light-gray);
}
.navbar-default .navbar-nav>li>a:active {
background-color: transparent;
color: var(--light-gray);
}
.line-menu {
min-height: 0.3333em;
background-color: var(--extra-blue);
margin: 0.3333em 0 0.7142em 0;
}
.logo {
max-height: 160px;
position: absolute;
top: 0;
left: 0;
}
/* Main Section */
.main-image {
min-height: 73vh;
background-color: var(--light-blue);
padding: 7vh 0 7vh 0;
}
.flag-1 {
margin-bottom: 10px;
padding-bottom: 10px;
background-image: url('../img/4.png');
background-repeat: no-repeat;
}
.flag-2 {
margin-bottom: 5px;
padding-bottom: 10px;
background-image: url('../img/1.png');
background-repeat: no-repeat;
}
.circles {
margin-top: 8%;
background-image: url('../img/lineas.png');
background-repeat: no-repeat;
background-position: center;
background-size: 100% auto;
}
.circle {
width: 15vw;
height: 15vw;
background: rgba(255, 255, 255, 0.85);
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
vertical-align: middle;
text-align: center;
}
.circle:not(:first-child) {
margin-left: 10px;
}
.circle>h4 {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
margin: 0;
font-size: 24px;
}
.main-title {
color: var(--main-blue);
margin-top: 10px;
font-size: 60px;
}
.main-title>span {
color: white;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.12/css/all.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container-fluid main-image">
<div class="flag-1 col-md-8">
<h1 class="main-title">Espacio <span>sustentable</span></h1>
</div>
<div class="flag-2 col-md-6">
<h1 class="main-title">de <span>México</span></h1>
</div>
<div class="col-md-12 circles">
<div class="col-md-2 circle">
<h4>5,000 m <span>construidos</span></h4>
</div>
<div class="col-md-2 circle">
<h4>10,000 mt2 <span>instalados</span></h4>
</div>
<div class="col-md-2 circle">
<h4>300 edificios <span>rehabilitados</span></h4>
</div>
<div class="col-md-2 circle">
<h4>239 zonas <span>modificadas</span></h4>
</div>
</div>
</div>
<>
que te permitirá añadir código HTML+JS+CSS como JSFiddle). Lee Cómo preguntar y cómo crear un ejemplo mínimo verificable para más información.