Horizontally Center 2 Div Buttons Inside Parent Div

Question

Have 2 nav buttons created with DIVs, trying to center both within a parent DIV in a responsive layout. The width of the parent DIV is responsive but the width of the buttons are fixed. Both buttons should be next to each other centered within the parent, with even space on both sides.

Looked at a few other posts about this, tried all the solutions including adding: margin:0px auto; - and also tried adding both: margin-left: auto; margin-right: auto - neither option has worked.

Don't know if it's an issue with some of the button style CSS code that's preventing it from being able to center, or if I'm missing something else.

Here's the code:

#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

Of course, flex-box can do this

#head-map {
  padding-top: 0px;
  display: flex;
  justify-content: space-around;
}
#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;
}
#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;
}
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>

The above example spaces the buttons out across the page.

This FIDDLE shows them centered with some slight left/right margin added.

Answer 2

Make the inner divs display: inline-block and center them with text-align: center on the parent. Remove the floats.

Simplified example

Note how each inner div has no whitespace between it in the markup. This 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>

Answer 3

You'll need to add a wrapper div around the two buttons as well as a clear div.

http://codepen.io/anon/pen/mJKagE

<div id="head-map">
  <div class="wrapper">
    <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 class="clear"></div>
  </div>
  </div>

Here's the CSS. Note the .clear class.

#head-map {
    clear: none;
    float: left;
    margin-left: 30%;
    width: 100%;
    display: block;
    margin-right: 1%;
    text-align: center;
    padding-top: 0px;
  background:blue;
}
.wrapper {
  width:182px;
  margin:0 auto;
}
#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;
}
.clear{clear:both}
#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;
}

Answer 4

That's because you're using float: left; and causing text-align: center; wont work. Remove the float. Example:

#head-map {
    clear: none;
    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;
    display: inline-block;
    margin:0 10px;
}

#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;
    display: inline-block;
    margin:0 10px;
}

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>