html - 在父 Div 内水平居中放置 2 个 Div 按钮

Question

使用 DIV 创建了 2 个导航按钮，试图在响应式布局中将它们都置于父 DIV 的中心。父 DIV 的宽度是响应式的，但按钮的宽度是固定的。两个按钮应该在父级中居中相邻，两边的空间均匀。

查看了其他一些关于此的帖子，尝试了所有解决方案，包括添加:margin:0px auto; - 还尝试同时添加:margin-left: auto; margin-right: auto - 这两个选项都不起作用。

不知道是不是某些按钮样式 CSS 代码的问题导致它无法居中，或者我是否遗漏了其他内容。

代码如下:

#head-map {
  clear: none;
  float: left;
  margin-left: 30%;
  width: 100%;
  display: block;
  margin-right: 1%;
  text-align: center;
  padding-top: 0px;
}
#map-button {
  height: 35px;
  width: 70px;
  background-color: #12A483;
  border-color: #9dacc8;
  border-style: solid;
  border-width: 3px;
  border-radius: 15px;
  -moz-border-radius: 15px;
  -webkit-border-radius: 15px;
  text-align: center;
  padding-top: 7px;
  box-shadow: 0px 2px 7px #292929;
  -moz-box-shadow: 0px 3px 8px #292929;
  -webkit-box-shadow: 0px 3px 8px #292929;
  float: left;
  display: inline-block;
  margin: 0px auto;
}
#espanol-button {
  height: 35px;
  width: 100px;
  background-color: #12A483;
  border-color: #9dacc8;
  border-style: solid;
  border-width: 3px;
  border-radius: 15px;
  -moz-border-radius: 15px;
  -webkit-border-radius: 15px;
  text-align: center;
  padding-top: 7px;
  box-shadow: 0px 2px 7px #292929;
  -moz-box-shadow: 0px 3px 8px #292929;
  -webkit-box-shadow: 0px 3px 8px #292929;
  float: left;
  display: inline-block;
  margin: 0px auto;
}
a.whitelink {
  color: white;
}
a.whitelink:hover {
  color: #00133e;
  text-decoration: none;
}

<div id="head-map">
  <div id="map-button"><a class="whitelink" href="#" target="new">Map</a>
  </div>
  <div id="espanol-button"><a class="whitelink" href="#" target="self">Español</a>
  </div>
</div>

Answer 1

制作内部 div display: inline-block 并在父级上使用 text-align: center 将它们居中。移除 float 。

简化示例

请注意标记中每个内部 div 之间没有空格。这prevents extra whitespace being displayed between inline elements.

div {
  text-align: center;
}
div > div {
  display: inline-block;
  width: 100px;
  background: #F00;
  margin: 10px;
}

<div id="head-map">
  <div id="map-button"><a class="whitelink" href="#" target="new">Map</a>
  </div><div id="espanol-button"><a class="whitelink" href="#" target="self">Español</a>
  </div>
</div>