保证金：自动无效，其他问题无法解决问题

I'm having trouble getting columnContainer to center inside sectionTwo. The code is below. No matter what I do, it seems to be left aligned.

我无法让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;
}

Thanks for your help!

谢谢你的帮助!

3 个解决方案

#1

If you are trying to center 'ColumnContainer' it already centered it is because you have them both set to 100% width;

如果你试图将'ColumnContainer'居中,它已经居中了,因为你将它们都设置为100%宽度;

change it to this to see it actually working:

将其更改为此以查看它实际工作:

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;
}

#2

I don't think you should use margin-left 30% on your image if you want to center it. Indeed, as an inline element, you can use text-align: center on your parent div to do the trick :

如果你想让它居中,我认为你不应该在你的图像上使用保证金左边30%。实际上,作为内联元素,您可以在父div上使用text-align:center来执行操作:

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;
}

#3

this one will help you:

这个会帮助你:

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