保證金：汽車不起作用，其他問題沒有幫助解決它

Question

我無法讓columnContainer在sectionTwo中居中。代碼如下。無論我做什麼，它似乎都保持一致。

HTML：

<section class="sectionTwo"> 
     <div class="columnContainer"> 
      <div class="columnExplanation"> 
       <img src="Images/imagehere.png" style="width:150px;height:auto;margin-left:30%;margin-bottom:10px;"/> 
       <p>text here.</p> 
      </div> 
     </div> 
</section> 

CSS：

section.sectionTwo{ 

padding-bottom:20px; 
width:100%; 
height:340px; 
position:relative; 
background-color:#262626; 
border-top: 8px solid #3C3C3C; 
} 

div.columnContainer{ 
width:100%; 
position:relative; 
display:block; 
margin-left:auto; 
margin-right:auto; 
margin-top:20px; 
} 

感謝您的幫助！

Answer 1

如果您嘗試居中'ColumnContainer'，它已居中，因爲它們都設置爲100％寬度;

它改變這個，看看它實際工作：

section.sectionTwo{ 

padding-bottom:20px; 
width:100%; 
height:340px; 
position:relative; 
background-color:#262626; 
border-top: 8px solid #3C3C3C; 
} 

div.columnContainer{ 
background-color: red; 
width:100%; 
position:relative; 
display:block; 
margin-left:auto; 
margin-right:auto; 
margin-top:20px; 
text-align: center; 
} 

Answer 2

我不認爲，如果你想中心，它應該在圖像上使用保證金，在剩下的30％。的確，作爲一個內聯元素，你可以使用文本對齊：中心對你的父母DIV這樣的伎倆：

HTML：

<section class="sectionTwo"> 
     <div class="columnContainer"> 
      <div class="columnExplanation"> 
       <img src="Images/imagehere.png" style="width:150px;height:auto;margin-bottom:10px;"/> 
       <p>text here.</p> 
      </div> 
     </div> 
</section> 

CSS

section.sectionTwo{ 

padding-bottom:20px; 
width:100%; 
height:340px; 
position:relative; 
background-color:#262626; 
border-top: 8px solid #3C3C3C; 
} 

div.columnContainer{ 
width:100%; 
position:relative; 
display:block; 
margin-top:20px; 
    text-align: center; 
} 

Answer 3

這個人會幫你：

section {position:relative;} 
section #your_id { 
    position:absolute; 
    top:50%; 
    margin-top:-100px; */half of your height*/ 
    right:50%; 
    margin-right:-100px; */half of your width*/ 
}