1

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:

introducir la descripción de la imagen aquí

Ya intente con display:flex y no se puede, y tampoco con margin:auto.

Éste es el resultado esperado:

introducir la descripción de la imagen aquí

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>

4
  • añade tu codigo porfavor, para que te puedan ayudar Commented el 16 may. 2018 a las 0:19
  • Esta en el jsfiddle Commented el 16 may. 2018 a las 0:20
  • Hola Ana María, esta misma pregunta ya se ha realizado en el sitio (con código diferente, pero la idea es la misma). ¿Has probado las soluciones existentes? Además, deberías editar la pregunta para añadir el código en la propia publicación en lugar de poner un enlace a un sitio externo (el editor cuenta con un icono parecido a esto <> 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.
    – Alvaro Montoro
    Commented el 16 may. 2018 a las 0:27
  • Si ya utilice lo que comentan en otras preguntas de margin y flex pero no sirve. Gracias por la ayuda ya cambie el código a la pregunta siempre pense que tenias que hacerlo en JSFiddle y copiar el link, que amable. Commented el 16 may. 2018 a las 0:36

1 respuesta 1

1

Los círculos tienen una clase .col-md-2 y tienes 4, por lo tanto vas a ocupar 8 columnas de las 12 que tiene el grid. Puedes hacer uso de la clase .col-md-offset-* para que la primera columna no esté a la izquierda del todo sino que se sale alguna columna. Te quedan 4 columnas libres, por lo tanto quieres saltarte 2 para que queden otras 2 por la derecha y los círculos estén centrados.

Entonces sólo tendrías que añadirle la clase .col-md-offset-2 al primer círculo y entonces ya quedarán centrados como quieres:

: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 col-md-offset-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>

2
  • Muchas gracias Alvaro ya quedo resuelto. Nunca pensé lo de las columnas Commented el 16 may. 2018 a las 1:07
  • @AnaMaríaGonzález me alegra que te sirviera. Como recomendación no relacionada: completa el recorrido de bienvenida para aprender más sobre el sitio y su funcionamiento general (y para ganar una nueva medalla). Un saludo.
    – Alvaro Montoro
    Commented el 16 may. 2018 a las 2:01

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.