2 buttons next to each other width margins with css

Question

How do I put these <a>'s in the center of the div, next to each other with 40px of space in between them inside of a 100% width div?

a.explore {
  padding: 15px 20px;
  text-decoration: none;
  text-align: center;
  border: 1px solid #4f96b6;
  font-size: 20px;
}
#container {
  width: 100%;
}

<div id="container">
  <a class="explore" href="#" target="_blank">I'm Ready To Go</a>
  <a class="explore" href="#" target="_blank">Take Me Somewhere</a>
</div>

Ok links, how do i do that? – Press Awesome Jul 18 '16 at 14:55 — Press Awesome, Jul 18 '16 at 14:55

score 2 · Accepted Answer · edited Jul 18 '16 at 15:08

2

You can do this by using display:flex and justify-content:center on #container

a.explore {
  padding: 15px 20px;
  text-decoration: none;
  text-align: center;
  border: 1px solid #4f96b6;
  font-size: 20px;
}
a.explore:first-child {
  margin-right:40px;
}
#container {
  width: 100%;
  display:flex;

  justify-content: center;
}

<div id="container">
  <a class="explore" href="#" target="_blank">I'm Ready To Go</a>
  <a class="explore" href="#" target="_blank">Take Me Somewhere</a>
</div>

edited Jul 18 '16 at 15:08

Paulie_D

95,305
9
106
134

answered Jul 18 '16 at 14:56

Mihai T

15,254
2
16
30

I don't see the problem in your solution, it's not the most simple one, but it certainly works. – Maharkus Jul 18 '16 at 15:01
1

@Paulie_D you forgot to add `padding:1em` and `width:100%` to the second container `#container2` in your codepen example ................see here http://codepen.io/Paulie-D/pen/BzYWPj . they are the same – Mihai T Jul 18 '16 at 15:06

Paulie_D · Answer 2 · 2016-07-18T15:04:56.420

These aren't buttons...they're links...there's a difference.

However, flexbox is ideal here:

a.explore {
  padding: 15px 20px;
  text-decoration: none;
  text-align: center;
  border: 1px solid #4f96b6;
  font-size: 20px;
}
#container {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 1em;
  background: #c0ffee;
}
a:first-child {
  margin-right: 20px;
}
a:last-child {
  margin-left: 20px;
}

<div id="container">
  <a class="explore" href="#" target="_blank">I'm Ready To Go</a>
  <a class="explore" href="#" target="_blank">Take Me Somewhere</a>
</div>

2 buttons next to each other width margins with css

2 Answers2