CODEWITHSUNDEEP
htmlcssbutton
Matt
Matt

Reputation: 7249

html link buttons centered on page

Currently I am trying to create some links that look like buttons. It's working fairly well, except I want to be able to align them horizontally. This what I have so far:

.border {
  display: table;
  width: 220px;
  height: 120px;
  border: 2px solid #1E5034;
  transition: all 250ms ease-out;
  box-sizing: border-box;
  border-spacing: 10px;
  float:left;
}

.border:hover {
  border-spacing: 2px;
}

a.btn {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  color: #ffffff;
  font: 17.5px sans-serif;
  text-decoration: none;
  background-color: #1E5034;
  line-height: 20px;
  margin-bottom: 0;
}

a.btn:hover,
a.btn:focus,
a.btn:active,
a.btn:visited,
a.btn:link {
  color: #ffffff;
  background-color: #1E5034;
  text-decoration: none;
  cursor: pointer;
}
<div class="btn-grp">
  <div class="border">
    <a class="btn" href="#">Some really long text link #1</a>
  </div>
  <div class="border">
    <a class="btn" href="#">Some other really long text link #2</a>
  </div>
  <div class="border">
    <a class="btn" href="#">Some more really really long text link #3</a>
  </div>
  <div class="border">
    <a class="btn" href="#">The last really long text link #4</a>
  </div>
</div>

Edit: What I am trying to achieve

If it has display:inline-block; it will mess up with formatting with heights and not center the text.

I'm trying to create something as shown here, but then be able to center this on the page as well.

Thanks!

Upvotes: 0

Views: 89

Answers (2)

Sinto
Sinto

Reputation: 3997

Support in all browsers including IE.

.btn-grp {
  position: absolute;
  top: 0%;
  left: 50%;
  transform: translate(-50%, 0%);
  width: 80vw;
}

.border {
  display: table;
  width: 25%;
  height: 120px;
  border: 2px solid #1E5034;
  transition: all 250ms ease-out;
  box-sizing: border-box;
  border-spacing: 10px;
  float: left;
}

.border:hover {
  border-spacing: 2px;
}

a.btn {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  color: #ffffff;
  font: 17.5px sans-serif;
  text-decoration: none;
  background-color: #1E5034;
  line-height: 20px;
  margin-bottom: 0;
}

a.btn:hover,
a.btn:focus,
a.btn:active,
a.btn:visited,
a.btn:link {
  color: #ffffff;
  background-color: #1E5034;
  text-decoration: none;
  cursor: pointer;
}
<div class="btn-grp">
  <div class="border">
    <a class="btn" href="#">Some really long text link #1</a>
  </div>
  <div class="border">
    <a class="btn" href="#">Some other really long text link #2</a>
  </div>
  <div class="border">
    <a class="btn" href="#">Some more really really long text link #3</a>
  </div>
  <div class="border">
    <a class="btn" href="#">The last really long text link #4</a>
  </div>
</div>

If you need the 4 div at vertically centered then use:

.btn-grp {
  position: absolute;
  top: 50%;
  left:50%;
  transform: translate(-50%, -50%);
}

Upvotes: 1

Bhuwan
Bhuwan

Reputation: 16855

Because you are using width in px thats why then don't come in a single row...So try to use % width i.e. 25%...

.border {
  display: table;
  width: 25%;
  height: 120px;
  border: 2px solid #1E5034;
  transition: all 250ms ease-out;
  box-sizing: border-box;
  border-spacing: 10px;
  float: left;
}

.border:hover {
  border-spacing: 2px;
}

a.btn {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  color: #ffffff;
  font: 17.5px sans-serif;
  text-decoration: none;
  background-color: #1E5034;
  line-height: 20px;
  margin-bottom: 0;
}

a.btn:hover,
a.btn:focus,
a.btn:active,
a.btn:visited,
a.btn:link {
  color: #ffffff;
  background-color: #1E5034;
  text-decoration: none;
  cursor: pointer;
}
<div class="btn-grp">
  <div class="border">
    <a class="btn" href="#">Some really long text link #1</a>
  </div>
  <div class="border">
    <a class="btn" href="#">Some other really long text link #2</a>
  </div>
  <div class="border">
    <a class="btn" href="#">Some more really really long text link #3</a>
  </div>
  <div class="border">
    <a class="btn" href="#">The last really long text link #4</a>
  </div>
</div>

Well I recommend you to use Flexbox here...It will give you the full control to align the item vertically and horizontally...Also you will need to use :after for the background, as flexbox does not allow border-spacing

.btn-grp {
  display: flex;
  justify-content: center;
}

.border {
  width: 20%;
  height: 120px;
  border: 2px solid #1E5034;
  transition: all 250ms ease-out;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 10px;
}

a.btn {
  text-align: center;
  color: #ffffff;
  font: 16px sans-serif;
  text-decoration: none;
  line-height: 20px;
  margin-bottom: 0;
  flex: 1;
}

a.btn:hover,
a.btn:focus,
a.btn:active,
a.btn:visited {
  color: #ffffff;
  background-color: #1E5034;
  text-decoration: none;
  cursor: pointer;
}

.border:before {
  content: "";
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #1f5034;
  position: absolute;
  z-index: -1;
  transition: all .3s ease;
  transform: scale(0.85);
}

.border:hover:before {
  transform: scale(0.95);
}
<div class="btn-grp">
  <div class="border">
    <a class="btn" href="#">Some really long text link #1</a>
  </div>
  <div class="border">
    <a class="btn" href="#">Some other really long text link #2</a>
  </div>
  <div class="border">
    <a class="btn" href="#">Some more really really long text link #3</a>
  </div>
  <div class="border">
    <a class="btn" href="#">The last really long text link #4</a>
  </div>
</div>

Well for IE 8 support use display:inline-block and transform to place the content in center...

.btn-grp {
  text-align: center;
  font-size: 0;
}

.border {
  width: 20%;
  height: 120px;
  border: 2px solid #1E5034;
  transition: all 250ms ease-out;
  box-sizing: border-box;
  display: inline-block;
  vertical-align: top;
  position: relative;
  padding: 10px;
}

a.btn {
  text-align: center;
  color: #ffffff;
  font: 16px sans-serif;
  text-decoration: none;
  line-height: 20px;
  margin-bottom: 0;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  display: block;
}

.border:before {
  content: "";
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #1f5034;
  position: absolute;
  z-index: -1;
  transition: all .3s ease;
  transform: scale(0.85);
}

.border:hover:before {
  transform: scale(0.95);
}
<div class="btn-grp">
  <div class="border">
    <a class="btn" href="#">Some really long text link #1</a>
  </div>
  <div class="border">
    <a class="btn" href="#">Some other really long text link #2</a>
  </div>
  <div class="border">
    <a class="btn" href="#">Some more really really long text link #3</a>
  </div>
  <div class="border">
    <a class="btn" href="#">The last really long text link #4</a>
  </div>
</div>

Upvotes: 0

Related Questions