Div未正確居中，爲什麼？

-5

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

白盒：

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

來源

2014-12-05 Richard Weug

請在此發佈您的（相關）標記。 – 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

來源

2014-12-05 14:05:58

主要內容div的CSS是這樣的：

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

看看盒模型。寬度，填充和邊距一起使得元素的總寬度大於屏幕的寬度。該元素內的白色框雖然居中居中。

所以，問題不是白盒子，問題是父元素。

來源

2014-12-05 14:01:57 bzeaman

Div未正確居中，爲什麼？

回答

相關問題