Reputation: 21

CSS inline block center

I'm trying to center a div element.

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

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>

Upvotes: 0

Answers (4)

Saurav Rastogi

Reputation: 9731

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!

Upvotes: 2

Neelam Khan

Reputation: 1121

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;
}

Upvotes: 0

Hunter Turner

Reputation: 6894

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>

Upvotes: 3

DominicValenciana

Reputation: 1731

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>

Upvotes: 0

CSS inline block center

Answers (4)

Just need a wrapper

Working Example

Related Questions