Question

我的按钮框应位于导航菜单下方的中心位置。由于某种原因，框不在中心，元素正在浏览导航菜单。

如果使用开发工具并选择div（按钮框），您将看到元素的位置。这会影响我的填充。在底部填充看起来很好，但在顶部搞砸了。

以下是工作示例：

＆＃13;

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

＆＃13;

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

＆＃13;

如果有人可以帮我解决这个问题，请告诉我。我很确定我的一些CSS属性导致了这个问题。提前谢谢。

Answer 1

这是因为您的.xNavigationSetting班级有float: left，删除此项会解决问题

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

Answer 2

您可以添加

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 3

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

resourceLoadingRequest.streamingContentKeyRequestData(forApp:contentIdentifier:options:)

Answer 4

这是因为你在nav.xNavigationSetting中使用了float：left。

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

Answer 5

对你不对吗？

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

如何居中按钮盒？

5 个答案: