0

I've created a table, within which I've used some absolute positioning to ensure that the cells are always square.

I'm running into an issue when I try to vertically center the text within these divs. I can't find a good method to accomplish this, within the structure I'm working.

CODE

table.module-table {
 width: 100%;
 border-collapse: collapse;
 border: none;
 text-align: center;
}
table.module-table tr { vertical-align: middle; }
td.module {
 border: 1px solid rgba(255,255,255,0);
 padding: 0;
 width: 33.33%;
 position: relative;
 vertical-align: middle;
}
td.module:after {
 content: '';
 display: block;
 margin-top: 100%;
}
td.module .module-number {
 position: absolute;
 top: 0;
 bottom: 0;
 left: 0;
 right: 0;
 background: #ccc;
 transition: .5s all;
}
td.module a {
 display: block;
 color: #fff;
 line-height: 1;
 font-size: 55px;
 font-weight: bold;
 text-decoration: none;
 white-space: nowrap;
}
td.module .module-number.one-one:hover { background: #e11b22; }
td.module .module-number.one-two:hover { background: #c81b74; }
td.module .module-number.one-three:hover { background: #800052; }
td.module .module-number.one-four:hover { background: #46026b; }
td.module .module-number.one-five:hover { background: #7f4e99; }
td.module .module-number.one-six:hover { background: #2a2a86; }
td.module .module-number.one-seven:hover { background: #105bac; }
td.module .module-number.one-eight:hover { background: #00605d; }
td.module .module-number.one-nine:hover { background: #809027; }
<div class="module-wrapper">
 <table class="module-table">
  <tr>
   <td class="module"><div class="module-number one-one"><a href="#">1.1</a></div></td>
   <td class="module"><div class="module-number one-two"><a href="#">1.2</a></div></td>
   <td class="module"><div class="module-number one-three"><a href="#">1.3</a></div></td>
  </tr>
  <tr>
   <td class="module"><div class="module-number one-four"><a href="#">1.4</a></div></td>
   <td class="module"><div class="module-number one-five"><a href="#">1.5</a></div></td>
   <td class="module"><div class="module-number one-six"><a href="#">1.6</a></div></td>
  </tr>
  <tr>
   <td class="module"><div class="module-number one-seven"><a href="#">1.7</a></div></td>
   <td class="module"><div class="module-number one-eight"><a href="#">1.8</a></div></td>
   <td class="module"><div class="module-number one-nine"><a href="#">1.9</a></div></td>
  </tr>
 </table>
</div>

Fiddle - https://jsfiddle.net/gvan12br/

Manly
  • 369
  • 3
  • 18

2 Answers2

1

Just use the good old flexbox trick on your .module-number selector:

.module-number {
  display: flex;
  align-items: center;
  justify-content: center;
}

This will force the <div> to use CSS flexbox and align-items: center instructs it to centre the items vertically (perpendicular to the main axis, which is horizontal by default) and justify-content: center instructs it to center the items horizontally:

table.module-table {
  width: 100%;
  border-collapse: collapse;
  border: none;
  text-align: center;
}

table.module-table tr {
  vertical-align: middle;
}

td.module {
  border: 1px solid rgba(255, 255, 255, 0);
  padding: 0;
  width: 33.33%;
  position: relative;
  vertical-align: middle;
}

td.module:after {
  content: '';
  display: block;
  margin-top: 100%;
}

td.module .module-number {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: #ccc;
  transition: .5s all;
  /* Use flexbox to center content */
  display: flex;
  align-items: center;
  justify-content: center;
}

td.module a {
  display: block;
  color: #fff;
  line-height: 1;
  font-size: 55px;
  font-weight: bold;
  text-decoration: none;
  white-space: nowrap;
}

td.module .module-number.one-one:hover {
  background: #e11b22;
}

td.module .module-number.one-two:hover {
  background: #c81b74;
}

td.module .module-number.one-three:hover {
  background: #800052;
}

td.module .module-number.one-four:hover {
  background: #46026b;
}

td.module .module-number.one-five:hover {
  background: #7f4e99;
}

td.module .module-number.one-six:hover {
  background: #2a2a86;
}

td.module .module-number.one-seven:hover {
  background: #105bac;
}

td.module .module-number.one-eight:hover {
  background: #00605d;
}

td.module .module-number.one-nine:hover {
  background: #809027;
}
<div class="module-wrapper">
  <table class="module-table">
    <tr>
      <td class="module">
        <div class="module-number one-one"><a href="#">1.1</a></div>
      </td>
      <td class="module">
        <div class="module-number one-two"><a href="#">1.2</a></div>
      </td>
      <td class="module">
        <div class="module-number one-three"><a href="#">1.3</a></div>
      </td>
    </tr>
    <tr>
      <td class="module">
        <div class="module-number one-four"><a href="#">1.4</a></div>
      </td>
      <td class="module">
        <div class="module-number one-five"><a href="#">1.5</a></div>
      </td>
      <td class="module">
        <div class="module-number one-six"><a href="#">1.6</a></div>
      </td>
    </tr>
    <tr>
      <td class="module">
        <div class="module-number one-seven"><a href="#">1.7</a></div>
      </td>
      <td class="module">
        <div class="module-number one-eight"><a href="#">1.8</a></div>
      </td>
      <td class="module">
        <div class="module-number one-nine"><a href="#">1.9</a></div>
      </td>
    </tr>
  </table>
</div>
Terry
  • 63,248
  • 15
  • 96
  • 118
  • I'm such a n00b when it comes to the flexbox stuff. I always forget that's a thing now! – Manly Jan 31 '19 at 14:56
  • @Manly No problem! Once you get used to it, you'll find it extremely handy for lots of layout scenarios ;) – Terry Jan 31 '19 at 14:57
0

Try specifying line-height as 33.33vw, like this:

table.module-table {
  width: 100%;
  border-collapse: collapse;
  border: none;
  text-align: center;
}

table.module-table tr {
  vertical-align: middle;
}

td.module {
  border: 1px solid rgba(255, 255, 255, 0);
  padding: 0;
  width: 33.33vw;
  position: relative;
  vertical-align: middle;
}

td.module:after {
  content: '';
  display: block;
  margin-top: 100%;
}

td.module .module-number {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: #ccc;
  transition: .5s all;
  line-height: 33.33vw;
}

td.module a {
  display: block;
  color: #fff;
  font-size: 55px;
  font-weight: bold;
  text-decoration: none;
  white-space: nowrap;
}

td.module .module-number.one-one:hover {
  background: #e11b22;
}

td.module .module-number.one-two:hover {
  background: #c81b74;
}

td.module .module-number.one-three:hover {
  background: #800052;
}

td.module .module-number.one-four:hover {
  background: #46026b;
}

td.module .module-number.one-five:hover {
  background: #7f4e99;
}

td.module .module-number.one-six:hover {
  background: #2a2a86;
}

td.module .module-number.one-seven:hover {
  background: #105bac;
}

td.module .module-number.one-eight:hover {
  background: #00605d;
}

td.module .module-number.one-nine:hover {
  background: #809027;
}
<div class="module-wrapper">
  <table class="module-table">
    <tr>
      <td class="module">
        <div class="module-number one-one"><a href="#">1.1</a></div>
      </td>
      <td class="module">
        <div class="module-number one-two"><a href="#">1.2</a></div>
      </td>
      <td class="module">
        <div class="module-number one-three"><a href="#">1.3</a></div>
      </td>
    </tr>
    <tr>
      <td class="module">
        <div class="module-number one-four"><a href="#">1.4</a></div>
      </td>
      <td class="module">
        <div class="module-number one-five"><a href="#">1.5</a></div>
      </td>
      <td class="module">
        <div class="module-number one-six"><a href="#">1.6</a></div>
      </td>
    </tr>
    <tr>
      <td class="module">
        <div class="module-number one-seven"><a href="#">1.7</a></div>
      </td>
      <td class="module">
        <div class="module-number one-eight"><a href="#">1.8</a></div>
      </td>
      <td class="module">
        <div class="module-number one-nine"><a href="#">1.9</a></div>
      </td>
    </tr>
  </table>
</div>
Usagi Miyamoto
  • 6,196
  • 1
  • 19
  • 33