保證金：0自動;不居中，因爲有左和右的div

我想中間的中間圈子，但我甚至無法設置爲邊距時：0自動;並顯示：inline-block;或顯示錶格。有什麼建議麼？保證金：0自動;不居中，因爲有左和右的div

HTML

<div id="intro"> 
    <p class="body">As part of Science World’s Cycle Safe Initiative we have installed sensors at each of our gates. In the past year we have had over <b>300,000</b> people ride along. Some information we gathered for June included;</p> 
    <span class="blue circle"> 
     <h3>2 - 3PM</h3> 
     <p>is the busiest hour</p> 
    </span> 
    <span class="green circle"> 
     <h3>117,295</h3> 
     <p>riders this month</p> 
    </span> 
    <span class="navy circle"> 
     <h3>10%</h3> 
     <p>of Vancouverites*</p> 
    </span> 
</div>

CSS

#intro { 
    max-width: 1080px; 
    margin: 0 auto; 
} 
#intro .circle { 
    min-width: 230px; 
    min-height: 230px; 
    display: inline-block; 
    text-align: center; 
    border-radius: 1000px; 
    color: white; 
    margin: 60px 0; 
} 
#intro .circle h3 { 
    margin-top: 80px; 
    margin-bottom: 0; 
    font-size: 2.2em; 
} 
#intro .circle p { 
    margin-top: 0; 
} 
#intro .circle.blue { 
    background: #0079c8; 
} 
#intro .circle.green { 
    background: #2ecc71; 
} 
#intro .circle.navy { 
    background: #34495e; 
    float: right; 
}

來源

2014-06-12 Adam Ginther

添加text-align:center到#intro（如你的內在內容的行爲像內聯），並添加float:left您#intro .circle.blue。

Example

來源

2014-06-12 01:40:18 potashin

只有塊級元素可以與margin:0 auto居中。

雖然你可以用其他方法達到你想要的效果。

通過添加以下CSS到你的中間圓圈的解決方案見this updated version of your jsfiddle：

position:absolute; 
left:50%; 
margin:-115px;

（注意，負margin-left必須等於一半的元素的寬度，使它看起來使用此解決方案的中心。）

來源

2014-06-12 01:32:32 Kylok

我已經更新了你的代碼：http://jsfiddle.net/h9HGG/6/

訣竅是把它設置爲一個div內各中心圈「顯示：表單元格」。然後將所有圓圈包裝在設置爲「display：table」的容器中。

例如：

<div class="wrapper"> <!--display: table, width: 100%, table-layout: fixed --> 
    <div class="circle-container"> <!--display: table-cell, text-align: center --> 
    <!--circle 1--> 
    </div> 
    <div class="circle-container"> <!--display: table-cell, text-align: center --> 
    <!--circle 2--> 
    </div> 
    <div class="circle-container"> <!--display: table-cell, text-align: center --> 
    <!--circle 3--> 
    </div> 
</div>

來源

2014-06-12 01:37:53

我不知道這會爲你工作 - FIDDLE

我把圈子裏的div，飄然離開他們，對齊：中心，並給每一個寬度爲33％。

它們很靈活，甚至在屏幕水平移動時重疊（不確定它是否適用於您）。

CSS

.centerme { 
      float: left; 
      width: 33%; 
      text-align: center; 
}

來源

2014-06-12 01:39:19 TimSPQR

保證金：0自動;不居中，因爲有左和右的div

回答

相關問題