How to center button box?

I have button box that should be centered below navigation menu. For some reason box is not centered and element is going over navigation menu.

If you use dev tools and select div(button box) you will see position of the element. This affects my padding. On the bottom padding looks fine but on the top is messed up.

Here is working example:

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 target="_blank" rel="nofollow" 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>

If anyone can help me to solve this problem please let me know. I’m pretty sure that some of my CSS attributes are causing this problem. Thanks in advance.



it’s because your .xNavigationSetting class have float: left, removing this will fix the issue

Or, if you want to keep that float: left style add clear: left; to #settingTbl

Is right for you no ?

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

Remove the float: left on settingsBox or if that can’t be removed, you can add clear: both to settingTbl

See demo below that clears the float used:

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 target="_blank" rel="nofollow" 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>

You can add

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

to div.buttonbox

https://jsfiddle.net/207gsm80/

The best way to do it is described in here:

Centering in the Unknown

It will show you how to center knows and unknown content size.
Excellent articles with full code.

this becuase you’re using float: left in nav.xNavigationSetting.

float: left – will take the control towards left of the screen and

float: right – will do the opposite and will take the control towards right side of the screen.

if you remove float: left then it will fix the issue. Give a try.

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