How do I align and space out these buttons?

Question

I want my buttons to be equally spaced out within that box. I tried using the align left. center, right but it's not actually moving anywhere. If I give it a padding, it won't look well on mobile.

body {
  background-color: #9FDFF0;
}

#mine {
  width: 550px;
  margin: auto auto auto auto;
  padding: 10px 10px;
  background-color: white;
  min-height: 100px;
  border: 2px solid #73c0d8;
  border-radius: 6px;
  height: auto;
  max-width: 100%;
}

img {
  max-width: 100%;
  height: auto;
  width: auto\9;
  /* ie8 */
}

p {
  font-size: 30px;
}

.OrangeBtn {
  -moz-box-shadow: inset 0px 1px 0px 0px #f9eca0;
  -webkit-box-shadow: inset 0px 1px 0px 0px #f9eca0;
  box-shadow: inset 0px 1px 0px 0px #f9eca0;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f0c911), color-stop(1, #f2ab1e));
  background: -moz-linear-gradient(top, #f0c911 5%, #f2ab1e 100%);
  background: -webkit-linear-gradient(top, #f0c911 5%, #f2ab1e 100%);
  background: -o-linear-gradient(top, #f0c911 5%, #f2ab1e 100%);
  background: -ms-linear-gradient(top, #f0c911 5%, #f2ab1e 100%);
  background: linear-gradient(to bottom, #f0c911 5%, #f2ab1e 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f0c911', endColorstr='#f2ab1e', GradientType=0);
  background-color: #f0c911;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  border-radius: 6px;
  border: 1px solid #e65f44;
  display: inline-block;
  cursor: pointer;
  color: #c92200;
  font-family: Verdana;
  font-size: 15px;
  font-weight: bold;
  padding: 6px 24px;
  text-decoration: none;
  text-shadow: 0px 1px 0px #ded17c;
}

.OrangeBtn:hover {
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f2ab1e), color-stop(1, #f0c911));
  background: -moz-linear-gradient(top, #f2ab1e 5%, #f0c911 100%);
  background: -webkit-linear-gradient(top, #f2ab1e 5%, #f0c911 100%);
  background: -o-linear-gradient(top, #f2ab1e 5%, #f0c911 100%);
  background: -ms-linear-gradient(top, #f2ab1e 5%, #f0c911 100%);
  background: linear-gradient(to bottom, #f2ab1e 5%, #f0c911 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f2ab1e', endColorstr='#f0c911', GradientType=0);
  background-color: #f2ab1e;
}

.OrangeBtn:active {
  position: relative;
  top: 1px;
}

<body>
  <div id="mine">
    <h1>
      <center>Logo Goes Here</center>
    </h1>
    <a class="OrangeBtn" href="#">My Button 1</a>
    <a class="OrangeBtn" href="#">My Button 2</a>
    <a class="OrangeBtn" href="#">My Button 3</a>
    <hr>
    <p>
      The server is online
    </p>
  </div>
</body>

fen1x · Accepted Answer

Use flexbox with justify-content: space-evenly;:

.button-container {
  display: flex;
  /*Next line does the magic*/
  justify-content: space-evenly;
}

body {
  background-color: #9FDFF0;
}

#mine {
  width: 550px;
  margin: auto auto auto auto;
  padding: 10px 10px;
  background-color: white;
  min-height: 100px;
  border: 2px solid #73c0d8;
  border-radius: 6px;
  height: auto;
  max-width: 100%;
}

img {
  max-width: 100%;
  height: auto;
  width: auto\9;
  /* ie8 */
}

p {
  font-size: 30px;
}

.OrangeBtn {
  -moz-box-shadow: inset 0px 1px 0px 0px #f9eca0;
  -webkit-box-shadow: inset 0px 1px 0px 0px #f9eca0;
  box-shadow: inset 0px 1px 0px 0px #f9eca0;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f0c911), color-stop(1, #f2ab1e));
  background: -moz-linear-gradient(top, #f0c911 5%, #f2ab1e 100%);
  background: -webkit-linear-gradient(top, #f0c911 5%, #f2ab1e 100%);
  background: -o-linear-gradient(top, #f0c911 5%, #f2ab1e 100%);
  background: -ms-linear-gradient(top, #f0c911 5%, #f2ab1e 100%);
  background: linear-gradient(to bottom, #f0c911 5%, #f2ab1e 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f0c911', endColorstr='#f2ab1e', GradientType=0);
  background-color: #f0c911;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  border-radius: 6px;
  border: 1px solid #e65f44;
  display: inline-block;
  cursor: pointer;
  color: #c92200;
  font-family: Verdana;
  font-size: 15px;
  font-weight: bold;
  padding: 6px 24px;
  text-decoration: none;
  text-shadow: 0px 1px 0px #ded17c;
}

.OrangeBtn:hover {
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f2ab1e), color-stop(1, #f0c911));
  background: -moz-linear-gradient(top, #f2ab1e 5%, #f0c911 100%);
  background: -webkit-linear-gradient(top, #f2ab1e 5%, #f0c911 100%);
  background: -o-linear-gradient(top, #f2ab1e 5%, #f0c911 100%);
  background: -ms-linear-gradient(top, #f2ab1e 5%, #f0c911 100%);
  background: linear-gradient(to bottom, #f2ab1e 5%, #f0c911 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f2ab1e', endColorstr='#f0c911', GradientType=0);
  background-color: #f2ab1e;
}

.OrangeBtn:active {
  position: relative;
  top: 1px;
}

<div id="mine">
  <h1>
    <center>Logo Goes Here</center>
  </h1>
  <div class="button-container">
    <a class="OrangeBtn" href="#">My Button 1</a>
    <a class="OrangeBtn" href="#">My Button 2</a>
    <a class="OrangeBtn" href="#">My Button 3</a>
  </div>
  <hr>
  <p>
    The server is online
  </p>
</div>

How do I align and space out these buttons?

Tags:

html

css

The Newbie

1 Answers

fen1x

Recent Activity

Donate For Us

How do I align and space out these buttons?

Tags:

html

css

The Newbie

1 Answers

fen1x

Related questions

Recent Activity

Donate For Us