如何使按钮框居中?

Posted

技术标签:

【中文标题】如何使按钮框居中?【英文标题】:How to center button box? 【发布时间】:2018-02-08 09:30:05 【问题描述】:

我的按钮框应该在导航菜单下方居中。由于某种原因,框未居中,元素正在浏览导航菜单。

如果您使用开发工具并选择 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 属性导致了这个问题。提前致谢。

【问题讨论】:

说实话,我不明白。 div.buttonBox text-align: center; 适合你吗? 【参考方案1】:

这是因为你的 .xNavigationSetting 类有 float: left,删除它会解决问题

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

【讨论】:

如果我的导航栏中有多个 a 标签元素并删除可能导致其他问题的左浮动... 然后你可以将clear: left;添加到#settingTbl,这样也可以解决问题 请不要使用float【参考方案2】:

不适合你吗?

#settingAdd 
  display: block;
  margin: auto;

【讨论】:

【参考方案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>

【讨论】:

【参考方案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>

【讨论】:

【参考方案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;

【讨论】:

以上是关于如何使按钮框居中?的主要内容,如果未能解决你的问题,请参考以下文章

如何用word使图片上下居中

如何使文本框中的字体上下左右都居中

如何在Javascript中使按钮居中

缩小占位符文本后如何使占位符和文本框光标居中?

如何使两个标签居中

如何使标签和按钮居中?