Css Display-table Width 100% - Missing Pixel?

I have a few div containers with overlays inside of them:

Solution 1:

Depending on the width, the calculation is giving you a half pixel (which can't be rendered). We can achieve this without display: table. I'm not quite sure why this only occurs with display: table, but leaving the overlay as a block element fixes the problem.

In this example:

• .overlay:before brings inline elements into the middle. It is an invisible element that is lined up on the left hand side inside the overlay.

• The closing and opening div tags have no white space between them, which prevents the inline gap.

Read more about removing the gap between inline elements.

CSS / HTML / Demo

body { 
    margin: 0;
}
.container {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    background: #fed900;
    width: 25%;
    height: 200px;
}
.overlay:before {
    content:'';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.4);
    width: 100%;
    height: 100%;
    text-align: center;
}

<divclass="container"><divclass="overlay">Centered</div></div><divclass="container"><divclass="overlay">Centered</div></div><divclass="container"><divclass="overlay">Centered</div></div><divclass="container"><divclass="overlay">Centered</div></div>

Solution 2:

* {
  margin:0px;
  padding:0px;
}

.container {
  position: relative;
  display: inline-block;
  background: #fed900;
  width: 25%;
  height: 200px;
  margin-right: -3px;
}

Share