Div未正确居中，为什么？

问题描述：

屏幕中间的白色框中有文字，它们不居中。如果你的屏幕非常小，你可以更清楚地看到它。

白盒：

.step { 
    background-color: white; 
    width: 90%; 
    margin: 0 auto; 
    margin-top: 15px; 
    margin-bottom: 15px; 
    padding: 20px; 
    color: #303030; 
    display: block; 
    float: left; 
}

请在此发布您的（相关）标记。 – jbutler483 2014-12-05 13:59:30

删除浮动左侧使其更糟糕 – 2014-12-05 14:02:23

答

变化width: 100%;到width: 90%;这样你就不会加入margin-right/left:5%扩展页面，并设置padding:15px;到padding: 15px 0;所以只有顶部和底部得到填充：

#contentholder { 
    background-color: #eeeeee; 
    margin-left: 5%; 
    margin-right: 5%; 
    min-height: calc(100vh - 210px); 
    width: 90%; 
}

然后：

得到摆脱float:left类.step。繁荣它都集中。

enter image description here

答

主要内容div的CSS是这样的：

#contentholder { 
    background-color: #EEEEEE; 
    padding: 15px; 
    margin-left: 5%; 
    margin-right: 5%; 
    min-height: calc(100vh - 210px); 
    width: 100%; 
}

看看盒模型。宽度，填充和边距一起使得元素的总宽度大于屏幕的宽度。该元素内的白色框虽然居中居中。

所以，问题不是白盒子，问题是父元素。

Div未正确居中，为什么？

相关推荐