如何居中按鈕盒？

Question

我的按鈕框應該在導航菜單下方居中。 由於某種原因，框不在中心，元素正在瀏覽導航菜單。

如果您使用開發工具並選擇div（按鈕框），您將看到元素的位置。 這會影響我的填充。 在底部填充看起來很好，但在頂部搞砸了。

這是工作示例：

 section.settingsBox { width: 100%; padding-top: 0; float: left; background-color: white; border: 2px solid #000099; } nav.xNavigationSetting { width: 100%; margin-left: 0; margin-right: 0; padding-top: 2px; background-color: #c8e2db; float: left; border-bottom: 2px solid #000099; height: 18px; } nav.xNavigationSetting a { color: black; text-decoration: none; cursor: pointer; font-weight: bold; padding-left: 5px; padding-right: 5px; } nav.xNavigationSetting a:hover { color: #999999; } div.buttonBox { background-color: #c8e2db; padding-left: 10px; padding-top: 5px; padding-bottom: 5px; border-bottom: 2px solid #000099; } 

 <section class="settingsBox"> <div id="htmlSetting"> <nav class="xNavigationSetting"> <a href="#" data-id="settingMain">Menu</a> | </nav> <div id="settingTbl"> <div class="buttonBox"> <input type="button" name="settingButton" id="settingAdd" value="Add" /> </div> <div class="settingsTblMaster"> <table> <thead> <tr> <th>Test</th> </tr> </thead> <tbody> <tr> <td>Row 1</td> </tr> </tbody> </table> </div> </div> </div> </section> 

如果有人可以幫我解決這個問題，請告訴我。 我很確定我的一些CSS屬性導致了這個問題。 提前致謝。

Answer 1

這是因為你的.xNavigationSetting類有float: left ，刪除它會解決問題

或者，如果你想保持那個float: left樣式添加clear: left; 到#settingTbl

Answer 2

你可以加

display: flex;
  align-items: center;
  justify-content: center;

到div.buttonbox

https://jsfiddle.net/207gsm80/

 section.settingsBox{ width: 100%; padding-top: 0; float: left; background-color: white; border: 2px solid #000099; } nav.xNavigationSetting { width: 100%; margin-left: 0; margin-right: 0; padding-top: 2px; background-color: #c8e2db; float: left; border-bottom: 2px solid #000099; height: 18px; } nav.xNavigationSetting a { color: black; text-decoration: none; cursor: pointer; font-weight: bold; padding-left: 5px; padding-right: 5px; } nav.xNavigationSetting a:hover { color: #999999; } div.buttonBox{ background-color: #c8e2db; padding-left: 10px; padding-top: 5px; padding-bottom: 5px; border-bottom: 2px solid #000099; display: flex; align-items: center; justify-content: center; } 

 <section class="settingsBox"> <div id="htmlSetting"> <nav class="xNavigationSetting"> <a href="#" data-id="settingMain">Menu</a> | </nav> <div id="settingTbl"> <div class="buttonBox"> <input type="button" name="settingButton" id="settingAdd" value="Add" /> </div> <div class="settingsTblMaster"> <table> <thead><tr><th>Test</th></tr></thead> <tbody><tr><td>Row 1</td></tr></tbody> </table> </div> </div> </div> </section> 

Answer 3

刪除float: left的settingsBox或如果無法刪除，您可以添加clear: both到settingTbl

請參閱下面的演示， 清除使用的float ：

 section.settingsBox { width: 100%; padding-top: 0; float: left; background-color: white; border: 2px solid #000099; } nav.xNavigationSetting { width: 100%; margin-left: 0; margin-right: 0; padding-top: 2px; background-color: #c8e2db; float: left; border-bottom: 2px solid #000099; height: 18px; } nav.xNavigationSetting a { color: black; text-decoration: none; cursor: pointer; font-weight: bold; padding-left: 5px; padding-right: 5px; } nav.xNavigationSetting a:hover { color: #999999; } div.buttonBox { background-color: #c8e2db; padding-left: 10px; padding-top: 5px; padding-bottom: 5px; border-bottom: 2px solid #000099; } #settingTbl { clear: both; } 

 <section class="settingsBox"> <div id="htmlSetting"> <nav class="xNavigationSetting"> <a href="#" data-id="settingMain">Menu</a> | </nav> <div id="settingTbl"> <div class="buttonBox"> <input type="button" name="settingButton" id="settingAdd" value="Add" /> </div> <div class="settingsTblMaster"> <table> <thead> <tr> <th>Test</th> </tr> </thead> <tbody> <tr> <td>Row 1</td> </tr> </tbody> </table> </div> </div> </div> </section> 

Answer 4

這是因為你正在使用float：left在nav.xNavigationSetting中。

float：left - 將控件朝向屏幕的左側

float：right - 將執行相反的操作，並將控件朝向屏幕的右側。

如果你刪除浮動：左，那么它將解決問題。 試一下。

nav.xNavigationSetting {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding-top: 2px;
    background-color: #c8e2db;
    border-bottom: 2px solid #000099;
    height: 18px;
}

Answer 5

對你不對嗎？

 #settingAdd { display: block; margin: auto; }