I am a beginner in HTML and StackOverflow and was trying to create a web page. I learned how to create this grid through some research but I am not sure how I would align it to the center of the web page. I tried using justify-content: center; but had no luck. Help would be greatly appreciated.

The actual web page

The CSS code:

.image-grid {
  --gap: 16px 16px;
  --num-cols: 4;
  --row-height: 40px;

  padding: var(--gap);

  display: grid;
  grid-template-columns: repeat(var(--num-cols), 1fr);
  grid-auto-rows: car(--row-height);
  gap: var(--gap);
}

img {
  border-radius: 15px;
  border: 5px solid;
}

.container {
  position: relative;
  width: 50%;
}

.image {
  display: block;
  width: 150px;
  height: 150px;
}

.overlay {
  position: absolute;
  top: 5px;
  bottom: 0;
  left: 5px;
  right: 0;
  height: 150px;
  width: 150px;
  opacity: 0;
  transition: 0.5s ease;
  border-radius: 10px;
  background-color: rgb(149, 69, 53);
}

.container:hover .overlay {
  opacity: 1;
}

.text {
  color: black;
  font-family: "Courier New", Courier, monospace;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

The Html code (I have 16 pictures in my grid so the is basically repeated 16 times):

<div >
    <div >
      <img
        src="picture"
        alt="Avatar"
        
      />
      <div >
        <div >Angelite<br /><br />STONE OF AWARENESS</div>
      </div>
    </div>
<div>

CodePudding user response：

You meant this? .image-grid {place-items: center;}

By the way pay attention to your last line! Don't forget to close the tag!

CodePudding user response：

To center the images inside the grid:

Your width: 50%; on your .container is causing this problem.

Remove it and then apply justify-items: center; to .image-grid.

CodePudding user response：

div {
  display: grid;
  place-items: center;
}

Try this