保证金：汽车不起作用，其他问题没有帮助解决它

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*/ 
}