CODEWITHSUNDEEP
htmlcss
Press Awesome
Press Awesome

Reputation: 37

2 buttons next to each other width margins with css

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>

Upvotes: 0

Views: 205

Answers (2)

Mihai T
Mihai T

Reputation: 17687

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>

Upvotes: 2

Paulie_D
Paulie_D

Reputation: 115096

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>

Upvotes: 0

Related Questions