0

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>
j08691
  • 204,283
  • 31
  • 260
  • 272
pledgeco
  • 21
  • 3
  • Are you trying to center the circles horizontally or vertically, just to be clear? Because you have two, so if you center one horizontally, the other won't be centered. – TylerH Nov 14 '16 at 16:32
  • You need to apply your centering to a parent element of the elements you want to center. – hungerstar Nov 14 '16 at 16:42
  • Possible duplicate of [CSS center display inline block?](http://stackoverflow.com/questions/4980525/css-center-display-inline-block) – TylerH Nov 14 '16 at 17:02

4 Answers4

3

You can center them by creating a parent div and adding text-align: center;

CSS 

.container {
  text-align: center;
}


.container {
  text-align: center;
}

.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="container">
  <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>
</div>
Hunter Turner
  • 6,804
  • 11
  • 41
  • 56
2

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 */
  justify-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!

Matěj Zábský
  • 16,909
  • 15
  • 69
  • 114
Saurav Rastogi
  • 9,575
  • 3
  • 29
  • 41
0

Just need a wrapper

The solution is to wrap your two elements in a parent div and then center the parent div.

I wrapped your two elements in a div named wrapper and then referenced the wrapper element and then gave it the following attributes

#wrapper {
    margin: 0px auto;
    display: table;
}

margin: 0px auto; will horizontally center a container element.

display: table; will make the parent `div auto wrap to the combined children's width.

Working Example

   

 #wrapper {margin: 0px auto; display:table;}
    .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 id="wrapper">
  <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>
</div>
Community
  • 1
  • 1
DominicValenciana
  • 1,681
  • 2
  • 16
  • 25
  • Why not use `text-align: center;` on the wrapper element? Using `display: table;` in place of setting a width is a neat little trick to get `margin: 0 auto;` to work without specifying a width. – hungerstar Nov 14 '16 at 16:44
  • @hungerstar for this example `text-align:center;` does not work as we are attempting to center align block elements, not just the text it self. – DominicValenciana Nov 14 '16 at 16:46
  • They're inline elements. Give `text-align: center;` a try, I promise it will work :P. – hungerstar Nov 14 '16 at 16:47
  • @hungerstar Oh yea, that did work. I didn't realize that the grid items are `inline-blocks`. I'll update my answer to explain the two method and how they would differ depending on the display style of the elements. – DominicValenciana Nov 14 '16 at 16:48
0

If you are looking to centralise the 2 divs you need to wrap them in a parent div and give it a width and then set margin: 0 auto; to that like so:

HTML:

<div class="grid_wrapper">
   <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>
</div>

CSS:

.grid_wrapper {
   width:500px; //change this to whatever you want
   margin: 0 auto;
}
Neelam Khan
  • 1,078
  • 8
  • 24