如何居中按鈕框？

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

適合你沒有？

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

Answer 3

上settingsBox取出float: left或者如果不能刪除，你可以添加到clear: bothsettingTbl

觀看演示低於清除的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

您可以添加

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

到div.buttonbox

https://jsfiddle.net/207gsm80/

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

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

Answer 5

此監守你使用浮動：留在nav.xNavigationSetti NG。

浮動：左 - 將採取朝屏幕左邊和

浮動控制：右 - 將做相反的，並會採取朝着屏幕的右側的控制。

如果你刪除float：left那麼它將解決這個問題。試一下。

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