Horizontal center of 2 Div buttons inside parent Div

Question

Horizontal center of 2 Div buttons inside parent Div

You have two navigation buttons created with a DIV trying to center both inside the parent DIV and in the responsive layout. The width of the parent DIV is responsive, but the width of the buttons is fixed. Both buttons should be next to each other, centered inside the parent, with equal space on either side.

After looking at a few other posts about this, tried all solutions including adding: margin:0px auto;

- and also tried adding both: margin-left: auto; margin-right: auto

- neither worked.

Don't know if it's related to some CSS style code that prevents it from being centered, 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>

Run code Hide result

+3

html css

RYNOmedia 15 jul. '15 at 16:00

source to share

4 answers

Make inner divs display: inline-block

and center them with text-align: center

on parent. Remove floats.

Simplified example

Note that each inner div has no spaces in between in the markup. This prevents extra spaces from 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>

Run code Hide result

+4

misterManSam 15 jul. 15 at 16:04

source to share

You need to add a div wrapper 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 is the CSS. Notice 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;
}

+1

codedude 15 jul. 15 at 16:06

source to share

Surely flex-box

can do it

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

Run code Hide result

In the example above, spaces are displayed on the page.

This FIDDLE shows that they are centered with a little left / right margin added.

+1

Paulie_D 15 jul. 15 at 16:10

source to share

Nanang Mahdaen El-Agung · Accepted Answer · 2015-07-15T16:05:36+0000

This is because what you are using float: left;

and calling text-align: center;

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

Run code Hide result

Horizontal center of 2 Div buttons inside parent Div

Simplified example

More articles: