我想中心一個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內聯塊中心

回答

只需要一個包裝

工作實例

相關問題