I am trying to align icons with text in the center of each column of a three column CSS grid, but the icons and text are slightly off center

Question

I am making my first html/css website and I have the start of a skeleton with placeholder images and icons. I want the icons with text, to each be centered within their respective column. I'm using a CSS grid to set up the columns.

.content-items-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.content-item-wrapper {
  position: relative;
}

.content-img-background {
  height: 350px;
  width: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.img-text-wrapper {
  position: absolute;
  top: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  text-align: center;
  padding-left: 100px;
  padding-right: 100px;
}

<div class="master-content-wrapper">
  <div class="content-items-wrapper">

    <div class="content-item-wrapper">
      <div class="content-img-background" style="background-image: URL(images/blue-placeholder.jpg)"></div>

      <div class="img-text-wrapper">
        <div class="logo-wrapper">
          <img src="images/wrench-placeholder.png">
        </div>

        <div class="subtitle">
          Services
        </div>
      </div>
    </div>

    <div class="content-item-wrapper">
      <div class="content-img-background" style="background-image:URL(images/white-placeholder.jpg)"></div>

      <div class="img-text-wrapper">
        <div class="logo-wrapper">
          <img src="images/computer-placeholder.png">
        </div>

        <div class="subtitle">
          Technicians
        </div>
      </div>
    </div>

    <div class="content-item-wrapper">
      <div class="content-img-background" style="background-image:URL(images/red-placeholder.jpg)"></div>

      <div class="img-text-wrapper">
        <div class="logo-wrapper">
          <img src="images/paper-placeholder.png">
        </div>

        <div class="subtitle">
          Reviews
        </div>
      </div>
    </div>
  </div>

I tried different paddings and tweaking some other things but it never gets exactly in the center of the three vertical columns. The icon with text I'm referring to is the ".img-text-wrapper" div.

Hi. they are centred for me when I run your code. Here is something that might help https://stackoverflow.com/questions/45536537/centering-in-css-grid — Roohullah Kazmi, Jul 27 '21 at 05:56
@RKazmi for me the text and img are centered between themselves but they are not centered within the parent element. — A Haworth, Jul 27 '21 at 07:21

score 1 · Accepted Answer · answered Jul 27 '21 at 07:20

If we put some background color and border to some of the elements we can more clearly see what is going on:

The absolutely positioned elements' contents are centered within themselves but not within their parent elements. To achieve that we need to display the parents as flex with justification and alignment centered. Also, the div giving the background to each of these elements does not seem to have any particular meaning other than providing a background image so that is removed and the background is put on the parent in this snippet which gives this result (on wide screens see note):

.content-items-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.content-item-wrapper {
  position: relative;
  border-style: solid;
  height: 350px;
  width: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: pink;
  display: flex;
  justify-content: center;
  align-items: center;
}

.content-img-background {
  height: 350px;
  width: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: pink;
}

.img-text-wrapper {
  position: absolute;
  top: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  text-align: center;
  padding-left: 100px;
  padding-right: 100px;
  background-color: lime;
}

<div class="master-content-wrapper">
  <div class="content-items-wrapper">

    <div class="content-item-wrapper" style="background-image: URL(images/blue-placeholder.jpg)">

      <div class="img-text-wrapper">
        <div class="logo-wrapper">
          <img src="https://i.stack.imgur.com/Iynpe.jpg">
        </div>

        <div class="subtitle">
          Services
        </div>
      </div>
    </div>

    <div class="content-item-wrapper" style="background-image:URL(images/white-placeholder.jpg)">

      <div class="img-text-wrapper">
        <div class="logo-wrapper">
          <img src="https://i.stack.imgur.com/Iynpe.jpg">
        </div>

        <div class="subtitle">
          Technicians
        </div>
      </div>
    </div>

    <div class="content-item-wrapper" style="background-image:URL(images/red-placeholder.jpg)">

      <div class="img-text-wrapper">
        <div class="logo-wrapper">
          <img src="https://i.stack.imgur.com/Iynpe.jpg">
        </div>

        <div class="subtitle">
          Reviews
        </div>
      </div>
    </div>
  </div>

(Note that on smaller displays the cells shrink to fit - this needs correction for full responsiveness - the square can't be given a fixed px dimension)

score 0 · Answer 2 · answered Jul 27 '21 at 06:46

Sorry i removed a lot of the css as this is not necessary for the answer.

.content-img-background {
    height: 350px;
    width: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.column {
  float: left;
  width: 30%;
  }
  div {
  text-align: center;
}

<!DOCTYPE html>
<html>
<head>
<style>


</style>
</head>
<body>

<div class="container">
        <div class="row">
            <div class="column">
                     <div style= "background-image: URL(images/blue-placeholder.jpg)">
                        <img src="images/wrench-placeholder.png">
                     </div>
                     <div class="subtitle">
                            Services
                        </div>
             </div>
             <div class="column">
                 <div style= "background-image:URL(images/white-placeholder.jpg)">
                            <img src="images/computer-placeholder.png">
                 </div>
                 <div class="subtitle">
                            Technicians
                 </div>
             </div>
             <div class="column">
                    <div style= "background-image:URL(images/red-placeholder.jpg)">
                     <img src="images/paper-placeholder.png">
                    </div>
                    <div class="subtitle">
                            Reviews
                    </div>
              </div>
        </div>
      
</div>
</body>
</html>

I am trying to align icons with text in the center of each column of a three column CSS grid, but the icons and text are slightly off center

2 Answers2