pledgeco pledgeco - 23 days ago 5
CSS Question

CSS inline block center

I'm trying to center a div element.

Example, its floating left, but it wont be in the center.. ->

enter image description here
Any suggestions?



.grid_3 {
margin-top:20px;
text-align:center;
margin-bottom:20px;
display: inline-block;
margin: 0 auto;
}

.fmcircle_out {
margin:0 auto;
width: 200px;
height: 200px;
background: rgba(221,221,221,0.3);
text-align: center;
opacity: 0.5;
line-height:10px;
border-radius:5px;
border-radius: 100px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
-o-border-radius: 100px;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}

.fmcircle_out:hover {
opacity: 0.8;

-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}

.fmcircle_out:hover .fmcircle_in img {
margin: 30px 25px 25px 25px;
width: 120px;
height: 120px;

-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}



.fmcircle_in {
width: 170px;
height: 170px;
margin: 15px;
display: inline-block;
overflow: hidden;


border-radius: 85px;
-moz-border-radius: 85px;
-webkit-border-radius: 85px;
-o-border-radius: 85px;
}

.fmcircle_in img {
border: none;
margin: 53px;
width: 64px;
height: 64px;

-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}

.fmcircle_in span {
margin: 0;
padding: 0;
border: 0;
vertical-align: baseline;
width: 160px;
background: #fff;
color: #666666;
padding: 5px;
margin: 70px 0 0 0;
height: 50px;
line-height:20px;
text-align: center;
font-weight: bold;
letter-spacing: 0.08em;
text-transform: uppercase;
float: left;
position: absolute;
opacity: 0;


border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;

-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}

.fmcircle_out:hover .fmcircle_in span {
opacity: 1;

-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}


}

<div class="grid_3">
<div class="fmcircle_out">
<a href="/article">
<div class="fmcircle_border">
<div class="fmcircle_in fmcircle_blue">
<span>Opprett artikkel</span><img src="/img/article.png" alt="" />
</div>
</div>
</a>
</div>
</div>

<div class="grid_3">
<div class="fmcircle_out">
<a href="/event">
<div class="fmcircle_border">
<div class="fmcircle_in fmcircle_blue">
<span>Opprett et kurs/event</span><img src="/img/event3.png" alt="" /></center>
</div>
</div>
</a>
</div>
</div>




Answer

You can use CSS Flexbox. Wrap your grids into a <div> named grid-flex (in my case), and give it following properties:

.grid-flex {
  display: flex; /* Flex Container */
  align-items: center; /* Vertically center the content */
  jsutify-content: center; /* Horizontally center the content */
}

Also remove the <center> tag too, it is now deprecated.

Have a look at the snippet below:

.grid-flex {
  display: flex;
  justify-content: center;
  align-items: center;
}

.grid_3 {
  margin-top: 20px;
  text-align:center;
  margin-bottom:20px;
}

.fmcircle_out {
  margin:0 auto;
  width: 200px;
  height: 200px;
  background: rgba(221,221,221,0.3);
  text-align: center;
  opacity: 0.5; 
  line-height:10px;
  border-radius:5px;
  border-radius: 100px;
  -moz-border-radius: 100px;
  -webkit-border-radius: 100px;
  -o-border-radius: 100px;
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  -ms-transition: all 0.2s linear;
  transition: all 0.2s linear;
}

  .fmcircle_out:hover {
    opacity: 0.8; 
    
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    -ms-transition: all 0.2s linear;
    transition: all 0.2s linear;
  }
  
  .fmcircle_out:hover .fmcircle_in img {
    margin: 30px 25px 25px 25px;
    width: 120px;
    height: 120px;
    
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    -ms-transition: all 0.2s linear;
    transition: all 0.2s linear;
  }
  


.fmcircle_in {
  width: 170px;
  height: 170px;
  margin: 15px;
  display: inline-block;
  overflow: hidden;

  
  border-radius: 85px;
  -moz-border-radius: 85px;
  -webkit-border-radius: 85px;
  -o-border-radius: 85px;
}

.fmcircle_in img {
  border: none;
  margin: 53px;
  width: 64px;
  height: 64px;
    
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  -ms-transition: all 0.2s linear;
  transition: all 0.2s linear;
}

.fmcircle_in span {
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline;
  width: 160px;
  background: #fff;
  color: #666666;
  padding: 5px;
  margin: 70px 0 0 0;
  height: 50px;
  line-height:20px;
  text-align: center;
  font-weight: bold;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  float: left;
  position: absolute;
  opacity: 0;

  
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -o-border-radius: 5px;
    
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  -ms-transition: all 0.2s linear;
  transition: all 0.2s linear;
}

  .fmcircle_out:hover .fmcircle_in span {
    opacity: 1;
    
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    -ms-transition: all 0.2s linear;
    transition: all 0.2s linear;
  }


}
<div class="grid-flex">

  <div class="grid_3">
    <div class="fmcircle_out">
      <a href="/article">
        <div class="fmcircle_border">
          <div class="fmcircle_in fmcircle_blue">
            <span>Opprett artikkel</span><img src="/img/article.png" alt="" />
          </div>
        </div>
      </a>
    </div>
  </div>
   
  <div class="grid_3">
    <div class="fmcircle_out">
      <a href="/event">
        <div class="fmcircle_border">
          <div class="fmcircle_in fmcircle_blue">
            <span>Opprett et kurs/event</span><img src="/img/event3.png" alt="" />
          </div>
        </div>
      </a>
    </div>
  </div>

</div>

Hope this helps!