CODEWITHSUNDEEP
htmlcss
BadHorsie
BadHorsie

Reputation: 14554

How to make a clickable responsive square box with centered content?

I have a set of columns each containing a square box that fills to the column width and maintains a square height ratio.

The entire box needs to be clickable, with the content inside that also centered within the box. I can't figure out a way of getting the inner <a> element to fill out the space inside the parent div and have its own content centered.

Here is an editable Fiddle

The entire square should be red, entirely clickable, and with a centered download button within.

I've reviewed a bunch of similar questions about making square boxes with CSS but didn't find anything about the inner elements filling out the box like this.

Thanks

.block {
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  border: 2px solid #600;
}
.block a {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #C00;
  text-decoration: none;
}
.block span {
  padding: 1em;
  border: 2px solid #FFF;
  text-align: center;
  color: #FFF;
}

/* Demo only */
.row {
  display: flex;
  justify-content: space-between;
}
.column {
  width: 20%;
}
<div class="row">
  <div class="column">
    <div class="block">
      <a href="#">
        <span>Download</span>
      </a>
    </div>
  </div>
  <div class="column">
    <div class="block">
      <a href="#">
        <span>Download</span>
      </a>
    </div>
  </div>
  <div class="column">
    <div class="block">
      <a href="#">
        <span>Download</span>
      </a>
    </div>
  </div>
  <div class="column">
    <div class="block">
      <a href="#">
        <span>Download</span>
      </a>
    </div>
  </div>
</div>

Upvotes: 0

Views: 660

Answers (1)

Gershom Maes
Gershom Maes

Reputation: 8150

Setting the parent .block to position: relative allows us to set .block > a to position: absolute, with dimensions that fill its parent; I only added 3 css rules, they're commented so you know which ones:

.block {
  position: relative; /* change #1 */
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  border: 2px solid #600;
}
.block a {
  position: absolute; /* change #2 */
  left: 0; right: 0; top: 0; bottom: 0; /* change #3 */
  display: flex;
  justify-content: center;
  align-items: center;
  background: #C00;
  text-decoration: none;
}
.block span {
  padding: 1em;
  border: 2px solid #FFF;
  text-align: center;
  color: #FFF;
}

/* Demo only */
.row {
  display: flex;
  justify-content: space-between;
}
.column {
  width: 20%;
}
<div class="row">
  <div class="column">
    <div class="block">
      <a href="#">
        <span>Download</span>
      </a>
    </div>
  </div>
  <div class="column">
    <div class="block">
      <a href="#">
        <span>Download</span>
      </a>
    </div>
  </div>
  <div class="column">
    <div class="block">
      <a href="#">
        <span>Download</span>
      </a>
    </div>
  </div>
  <div class="column">
    <div class="block">
      <a href="#">
        <span>Download</span>
      </a>
    </div>
  </div>
</div>

Upvotes: 1

Related Questions