Previously I posed a question here.

Adding the max-width: 800px; showed the same results in image. Tried various combinations of CSS with no positive results. The code snippet as follows:

<div className={styles.grid}>
          <div className={styles.imgc}>
          <a href="..\pages\satweather.js">
            <img
              className={styles.img}
              src="weatherbutton.jpg"
              width="100"
              height="50"
              onclick="openModal();currentSlide(1)"> 
            </img>
            <div>&rarr; SatWeather</div>
          </a>
          </div>

/* code continues in repetition for 4 more images 
before ending with */

</div>

Does anyone have any suggestions on what I might try or a solution to this problem? To get these images aligned center and horizontally to the page. Help is appreciated.

Here is desired result, but without space between photo and link to page

Please Note: This is JS, not HTML.

CodePudding user response：

• Here is html version of your code.
• Use display:flex to image container and then, Make one separate element for image box just like here which is image-box set it's anchor tag to display:flex and align-items:center.

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.container {
  background-color: #050505;
}

.image-container {
  position: relative;
  display: flex;
  flex-direction: row;
  gap: 15px;
  flex-wrap: wrap;
}

.image-class {
  height: 50px;
  width: 100%;
  object-fit: cover;
}

.image-box a {
  display: flex;
  flex-direction:column;
}

<div >
  <div >
    <div >
      <a href="javasctipt:void(0);">
        <img src="https://source.unsplash.com/random" alt="image" >
        <h1>image titel</h1>
      </a>
    </div>
    <div >
      <a href="javasctipt:void(0);">
        <img src="https://source.unsplash.com/random" alt="image" >
        <h1>image titel</h1>
      </a>
    </div>
    <div >
      <a href="javasctipt:void(0);">
        <img src="https://source.unsplash.com/random" alt="image" >
        <h1>image titel</h1>
      </a>
    </div>
    <div >
      <a href="javasctipt:void(0);">
        <img src="https://source.unsplash.com/random" alt="image" >
        <h1>image titel</h1>
      </a>
    </div>
  </div>
</div>