html - 为什么元素不在页面中心(margin:auto)

This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center。
                            
                        
                    
                
                                6年前关闭。
            
                    
我有这个HTML代码

<section id="ItemsContainer">
    <div id="FirstItem">
        This is First Item
    </div>
    <div id="SecondItem">
        This is Second Item
    </div>
</section>

这是我的CSS样式

#FirstItem, #SecondItem {
    text-align: center;
    float: left;
    padding: 5px;
}

    #FirstItem *, #SecondItem * {
        margin-left: auto;
        margin-right: auto;
    }

@media screen and (min-width: 600px) {
    #ItemsContainer {
        margin-left: auto;
        margin-right: auto;
        width: 500px;
        padding: 5px;
    }

    #FirstItem, #SecondItem {
        margin-left: auto;
        margin-right: auto;
        width: 200px;
        text-align: center;
        float: left;
        padding: 5px;
    }
}

这是代码的jsfiddle

问题是它们位于页面中心，但不完全位于页面中心。有谁能够帮助我？

最佳答案

您已将#ItemsContainer设置为500px宽，但是其中的两个元素的宽度不同。如果您计算2 * 200px，并且在每个文本的两边加上5px填充，则为420px。将#ItemsContainer更改为420px似乎可以解决问题，或者您可以调整第一项和第二项的宽度以总计为500px。

关于html - 为什么元素不在页面中心(margin:auto)，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/14893947/