如何居中按钮框？

Question

我有一个应该位于导航菜单下方居中的按钮框。由于某种原因，框没有居中，元素正在导航菜单上。

如果您使用开发工具和 select 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 class 有 float: left，删除它会解决问题

或者，如果您想保留 float: left 样式，请将 clear: left; 添加到 #settingTbl

Answer 2

适合你吗？

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

Answer 3

删除 settingsBox 上的 float: left 或者如果无法删除，您可以将 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

您可以添加

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 5

这是因为您使用的是 float: left in nav.xNavigationSetting。

float: left - 将控件移向屏幕左侧并且

float: right - 将做相反的事情并将控件移向屏幕的右侧。

如果您删除 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;
}

如何居中按钮框？

How to center button box?

html

css

css-float

centering