ボタンボックスを中央に置くにはどうすればいいですか？

Question

私は、ナビゲーションメニューの下の中央に置かなければならないボタンボックスを持っています。何らかの理由で、ボックスが中央に配置されず、要素がナビゲーションメニューに移動しています。

devツールを使用して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属性のいくつかがこの問題を引き起こしていると確信しています。前もって感謝します。あなたの.xNavigationSettingクラスがfloat: leftを持っているので、

Answer 1

それはあなたがfloat: leftスタイルが

Answer 2

はありませんあなたのために右であるclear: left;#settingTblに追加することを維持したい場合は、これは、問題

を修正したりします取り除く、ですか？

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

Answer 3

はsettingsBoxにfloat: leftを削除するか、それが削除できない場合、あなたはそれががfloatが使用クリアデモ下記参照settingTbl

にclear: bothを追加することができます。

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>

nav.xNavigationSettiに左：

Answer 4

あなたはfloatを使用しているこのbecuase

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

を追加することができます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; 
}