CSS 内联 block 中心

Question

我正在尝试使 div 元素居中。

例如，它向左浮动，但不会在中心.. ->

有什么建议吗？

.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 1

您可以通过创建父 div 并添加 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>