Center divs within a div

Question

Center divs within a div

Navigation

#1 by (1 votes)

1

I want to center the circles within col-md-12 the bad thing is that when I put margin:auto does not allow space between them:

Now try with display:flex and you can not, nor with margin:auto .

This is the expected result:

I share my code:

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

html css bootstrap bootstrap-3

asked by Ana María González 16.05.2018 в 02:07

source

1 answer

symfony 4 twig and images set bookmark in google maps android (API V2)

score 1 · Accepted Answer

The circles have a class .col-md-2 and you have 4, therefore you will occupy 8 columns of the 12 that the grid has. You can use the class .col-md-offset-* so that the first column is not to the left of the whole but some column comes out. You have 4 free columns left, so you want to skip 2 so that there are 2 more left and the circles are centered.

Then you would only have to add the class .col-md-offset-2 to the first circle and then they will be centered as you want:

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