我想中心一个div元素。CSS内联块中心

例，其浮动离开，但它不会是在中心.. - >

有什么建议？

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

来源

2016-11-14 pledgeco

你是想要将圆圈水平或垂直居中，只是为了清楚？因为你有两个，所以如果你把一个水平居中，另一个不会居中。 – TylerH

您需要将居中应用于要居中的元素的父元素。 – hungerstar

[CSS中心显示内嵌区块？]的可能重复（http://stackoverflow.com/questions/4980525/css-center-display-inline-block） – TylerH

您可以使用CSS Flexbox。包装你的电网升级为一个名为<div>grid-flex（在我的情况），并赋予其以下特性：

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

还能去除<center>标记过，现在已经过时了。

在下面的代码片段看一看：

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

希望这有助于！

来源

2016-11-14 16:36:27

只需要一个包装

解决方法是换你的两个元素在父div，然后居中父DIV。

我包你的两个元素在名为wrapper格，然后引用的wrapper元素，然后把它下面的属性

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

margin: 0px auto;将水平居中的容器元素。

display: table;会使父`div自动换行到组合儿童的宽度。

工作实例


 

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

来源

2016-11-14 16:33:08 DominicValenciana

为什么不在包装上使用'text-align：center;'元件？使用'display：table;'来代替设置宽度是获得'margin：0 auto;'的一个小技巧，它可以在不指定宽度的情况下工作。 – hungerstar

@hungerstar对于这个例子'text-align：center;'不起作用，因为我们试图居中对齐块元素，而不仅仅是它自己的文本。 – DominicValenciana

它们是内联元素。给'文本对齐：中心;'一试，我保证它会工作：P。 – hungerstar

您可以通过创建一个父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>

来源

2016-11-14 16:34:54

如果您正在寻找集中在2周的div你需要用它们在父DIV，并给它一个width，然后设置margin: 0 auto;到像这样：

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

来源

2016-11-14 16:35:28

不需要内嵌元素，'.grid_3'元素是。只需'text-align：center;'就可以了。 – hungerstar

CSS内联块中心

回答

只需要一个包装

工作实例

相关问题