边距：自动不起作用，其他问题也没有帮助解决它

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

如果你想居中，我认为你不应该在你的图像上使用 margin-left 30%。事实上，作为一个内联元素，你可以使用 text-align: center on 你的父 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*/
}