Center text inside div without affecting margins or dimensions?

Question

I am trying to create a 4x4 grid of pads. Each pad should have a caption that is positioned in the middle of the pad.

Given the following code:

.pads {
 width: 320px;
 height: 320px;
}
.pad_container {
 float: left;
 width: 80px;
 height: 80px;
 background-color: black;
}
.pad {
 width: 100%;
 height: 100%;
 background-color: powderblue;
 transition: background-color 0.3s, width 0.1s, height 0.1s, margin 0.1s;
 cursor: pointer; 
}
.pad:hover {
 background-color: yellow;
}
.pad:active {
 background-color: orange;
 margin-top: 10%;
 margin-left: 10%;
 height: 80%;
 width: 80%;    
}

<!DOCTYPE HTML>
<html>
 <body>
  <div class="pads">
   <div class="pad_container">
    <div class="pad">
     <div class="pad_caption">Pad 1</div>
    </div>
   </div>
   <div class="pad_container">
    <div class="pad">Pad 2</div>
   </div>
   <div class="pad_container">
    <div class="pad">Pad 3</div>
   </div>
   <div class="pad_container">
    <div class="pad">Pad 4</div>
   </div>
   <div class="pad_container">
    <div class="pad">Pad 5</div>
   </div>
   <div class="pad_container">
    <div class="pad">Pad 6</div>
   </div>
   <div class="pad_container">
    <div class="pad">Pad 7</div>
   </div><div class="pad_container">
    <div class="pad">Pad 8</div>
   </div>
   <div class="pad_container">
    <div class="pad">Pad 9</div>
   </div>
   <div class="pad_container">
    <div class="pad">Pad 10</div>
   </div>
   <div class="pad_container">
    <div class="pad">Pad 11</div>
   </div>
   <div class="pad_container">
    <div class="pad">Pad 12</div>
   </div><div class="pad_container">
    <div class="pad">Pad 13</div>
   </div>
   <div class="pad_container">
    <div class="pad">Pad 14</div>
   </div>
   <div class="pad_container">
    <div class="pad">Pad 15</div>
   </div>
   <div class="pad_container">
    <div class="pad">Pad 16</div>
   </div>
  </div>
  <script>
  </script>
 </body>
</html>

how can I put each pad caption in the middle of each pad?

In a simpler case I could do it with flexbox like this:

.test_pad {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    background-color: powderblue;
}

<div class="test_pad">
  <div class="test_pad_text">Test pad</div>
</div>

but in my scenario it will not center and also mess with other CSS properties lie margins or width/height dimensions etc.

I am also open to solution other than flexbox.

you need to center the text inside `pad` not `pad_container` if you want to avoid CSS mess — Temani Afif, Jun 12 '19 at 13:26
Posted the answer through snippet. You can go through that. Hope it works for you — Sai Manoj, Jun 12 '19 at 13:33
add you centring code to the `pad` and everything will work fine including the black margin (and yes it's a duplicate) — Temani Afif, Jun 12 '19 at 13:38
@Temani Afif: Thanks, applying the flexbox to `pad` (as described in my question) did the job. I was applying it to the container instead. — barciewicz, Jun 12 '19 at 13:49

Sai Manoj · Accepted Answer · 2019-06-12T13:36:41.983

To make it vertical and horizontal center add a new div in between class="pad" with the name class="pad_caption"

.pad_caption{
  position:relative;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
  text-align:center
}

Below is the working snippet

.pads {
  width: 320px;
  height: 320px;
}

.pad_container {
  float: left;
  width: 80px;
  height: 80px;
  background-color: black;
}

.pad {
  width: 100%;
  height: 100%;
  background-color: powderblue;
  transition: background-color 0.3s, width 0.1s, height 0.1s, margin 0.1s;
  cursor: pointer;
}

.pad:hover {
  background-color: yellow;
}

.pad:active {
  background-color: orange;
  margin-top: 10%;
  margin-left: 10%;
  height: 80%;
  width: 80%;
}

.pad_caption {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center
}

<!DOCTYPE HTML>
<html>

<body>
  <div class="pads">
    <div class="pad_container">
      <div class="pad">
        <div class="pad_caption">Pad 1</div>
      </div>
    </div>
    <div class="pad_container">
      <div class="pad">
        <div class="pad_caption">Pad 2</div>
      </div>
    </div>
    <div class="pad_container">
      <div class="pad">
        <div class="pad_caption">Pad 3</div>
      </div>
    </div>
    <div class="pad_container">
      <div class="pad">
        <div class="pad_caption">Pad 4</div>
      </div>
    </div>
    <div class="pad_container">
      <div class="pad">
        <div class="pad_caption">Pad 5</div>
      </div>
    </div>
    <div class="pad_container">
      <div class="pad">
        <div class="pad_caption">Pad 6</div>
      </div>
    </div>
    <div class="pad_container">
      <div class="pad">
        <div class="pad_caption">Pad 7</div>
      </div>
    </div>
    <div class="pad_container">
      <div class="pad">
        <div class="pad_caption">Pad 8</div>
      </div>
    </div>
    <div class="pad_container">
      <div class="pad">
        <div class="pad_caption">Pad 9</div>
      </div>
    </div>
    <div class="pad_container">
      <div class="pad">
        <div class="pad_caption">Pad 10</div>
      </div>
    </div>
    <div class="pad_container">
      <div class="pad">
        <div class="pad_caption">Pad 11</div>
      </div>
    </div>
    <div class="pad_container">
      <div class="pad">
        <div class="pad_caption">Pad 12</div>
      </div>
    </div>
    <div class="pad_container">
      <div class="pad">
        <div class="pad_caption">Pad 13</div>
      </div>
    </div>
    <div class="pad_container">
      <div class="pad">
        <div class="pad_caption">Pad 14</div>
      </div>
    </div>
    <div class="pad_container">
      <div class="pad">
        <div class="pad_caption">Pad 15</div>
      </div>
    </div>
    <div class="pad_container">
      <div class="pad">
        <div class="pad_caption">Pad 16</div>
      </div>
    </div>
  </div>
  <script>
  </script>
</body>

</html>

thanks, this works. However, I think a simpler solution would be to simply apply the flexbox properties mentioned in my question to `pad` element as per @Temanin Afif comment. — barciewicz, Jun 12 '19 at 13:51

score 0 · Answer 2 · answered Jun 12 '19 at 13:16

You need to set display: table in your .pad-container and add display: table-cell in your .pad along with vertical-align: middle and text-align: center.

Just setting text-align will not do the trick because you are still missing the vertical alignment which only a table display can offer.

This page might help you further: https://www.w3.org/Style/Examples/007/center.en.html

.pads {
 width: 320px;
 height: 320px;
}
.pad_container {
 float: left;
 width: 80px;
 height: 80px;
 background-color: black;
    display: table;
}
.pad {
 width: 100%;
 height: 100%;
 background-color: powderblue;
 transition: background-color 0.3s, width 0.1s, height 0.1s, margin 0.1s;
 cursor: pointer; 
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
.pad:hover {
 background-color: yellow;
}
.pad:active {
 background-color: orange;
 margin-top: 10%;
 margin-left: 10%;
 height: 80%;
 width: 80%;    
}

<!DOCTYPE HTML>
<html>
 <body>
  <div class="pads">
   <div class="pad_container">
    <div class="pad">
     <div class="pad_caption">Pad 1</div>
    </div>
   </div>
   <div class="pad_container">
    <div class="pad">Pad 2</div>
   </div>
   <div class="pad_container">
    <div class="pad">Pad 3</div>
   </div>
   <div class="pad_container">
    <div class="pad">Pad 4</div>
   </div>
   <div class="pad_container">
    <div class="pad">Pad 5</div>
   </div>
   <div class="pad_container">
    <div class="pad">Pad 6</div>
   </div>
   <div class="pad_container">
    <div class="pad">Pad 7</div>
   </div><div class="pad_container">
    <div class="pad">Pad 8</div>
   </div>
   <div class="pad_container">
    <div class="pad">Pad 9</div>
   </div>
   <div class="pad_container">
    <div class="pad">Pad 10</div>
   </div>
   <div class="pad_container">
    <div class="pad">Pad 11</div>
   </div>
   <div class="pad_container">
    <div class="pad">Pad 12</div>
   </div><div class="pad_container">
    <div class="pad">Pad 13</div>
   </div>
   <div class="pad_container">
    <div class="pad">Pad 14</div>
   </div>
   <div class="pad_container">
    <div class="pad">Pad 15</div>
   </div>
   <div class="pad_container">
    <div class="pad">Pad 16</div>
   </div>
  </div>
  <script>
  </script>
 </body>
</html>

Thanks, but the black margins do not appear upon button press with your solution. — barciewicz, Jun 12 '19 at 13:27

Center text inside div without affecting margins or dimensions?

2 Answers2