如何居中按钮框？

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; 
}