html - Margin: auto 不起作用，其他问题也无济于事

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

如果您尝试居中，“Column Container”已经居中，这是因为您将它们都设置为 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;
}