Html Question posted in
Some basic documentation can be found here.

Html – Aligning a a row of images that have effects and are links

How can I get these images aligned to center on every size monitor regardless of the size of monitor they are being shown on.

I have tried all sorts of "left: auto;, relative, -10%, …

I don’t know if they are in a container or not, and if I could simply put them in one and fix everything that would be awesome.

figure.snip0015 {
  display: inline-block;
  margin-left: auto;
  margin-right: auto;
  color: #fff;
  position: relative;
  width: 100%;
  margin: auto;
  overflow: hidden;
  max-width: 340px;
  max-height: 200px;
  background: #000000;
  text-align: center;
}


}
figure.snip0015 * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
figure.snip0015 img {
  opacity: 1;
  width: 100%;
  -webkit-transition: opacity 0.35s;
  transition: opacity 0.35s;
}
figure.snip0015 figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 3em 3em;
  width: 100%;
  height: 100%;
}
figure.snip0015 figcaption::before {
  position: absolute;
  top: 50%;
  right: 30px;
  bottom: 50%;
  left: 30px;
  border-top: 1px solid rgba(255, 255, 255, 0.8);
  border-bottom: 1px solid rgba(255, 255, 255, 0.8);
  content: "";
  opacity: 0;
  background-color: #ffffff;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  -webkit-transition-delay: 0.6s;
  transition-delay: 0.6s;
}
figure.snip0015 h5,
figure.snip0015 p {
  margin: 0 0 5px;
  opacity: 0;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, -webkit-transform 0.35s, -moz-transform 0.35s, -o-transform 0.35s, transform 0.35s;
}
figure.snip0015 h5 {
  word-spacing: -0.05em;
  font-weight: 300;
  text-transform: uppercase;
  -webkit-transform: translate3d(0%, 50%, 0);
  transform: translate3d(0%, 50%, 0);
  -webkit-transition-delay: 0.3s;
  transition-delay: 0.3s;
}
figure.snip0015 h5 span {
  font-weight: 800;
}
figure.snip0015 p {
  font-weight: 200;
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}
figure.snip0015 a {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  position: absolute;
  color: #ffffff;
}
figure.snip0015:hover img {
  opacity: 0.35;
}
figure.snip0015:hover figcaption h5 {
  opacity: 1;
  -webkit-transform: translate3d(0%, 0%, 0);
  transform: translate3d(0%, 0%, 0);
  -webkit-transition-delay: 0.3s;
  transition-delay: 0.3s;
}
figure.snip0015:hover figcaption p {
  opacity: 0.9;
  -webkit-transition-delay: 0.6s;
  transition-delay: 0.6s;
}
figure.snip0015:hover figcaption::before {
  background: rgba(255, 255, 255, 0);
  top: 30px;
  bottom: 30px;
  opacity: 1;
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}
<figure class="snip0015">
  <img src="http://open-sky.org/images/rough.jpg" alt="sample38" />
  <figcaption>
    <p>&nbsp;</p>
    <h5>- Roughnecks -</h5>
    <a href="http://www.open-sky.org/index.php/roughnecks"></a>
  </figcaption>
</figure>
<figure class="snip0015">
  <img src="http://open-sky.org/images/long.jpg" alt="sample38" />
  <figcaption>
    <p>&nbsp;</p>
    <h5>- Longistics -</h5>
    <a href="http://www.open-sky.org/index.php/longgistics"></a>
  </figcaption>
</figure>
<figure class="snip0015">
  <img src="http://open-sky.org/images/rnd.jpg" alt="sample38" />
  <figcaption>
    <p>&nbsp;</p>
    <h5>- Research & Development -</h5>
    <a href="http://www.open-sky.org/index.php/r-d"></a>
  </figcaption>
</figure>
<figure class="snip0015">
  <img src="http://open-sky.org/images/force.jpg" alt="sample38" />
  <figcaption>
    <p>&nbsp;</p>
    <h5>- F.O.R.C.E. -</h5>
    <a href="http://www.open-sky.org/index.php/force"></a>
  </figcaption>
</figure>
<figure class="snip0015">
  <img src="http://open-sky.org/images/med.jpg" alt="sample38" />
  <figcaption>
    <p>&nbsp;</p>
    <h5>- Trauma -</h5>
    <a href="http://www.open-sky.org/index.php/trauma"></a>
  </figcaption>
</figure>
Tags:

2

Answers


  1. 0 
    .container {
          width: 100%;
          margin: 0 auto;
          text-align: center;
        }
        figure.snip0015 {
          display: inline-block;
          margin-left: auto;
          margin-right: auto;
          color: #fff;
          position: relative;
          width: 100%;
          margin: auto;
          overflow: hidden;
          max-width: 340px;
          max-height: 200px;
          background: #000000;
          text-align: center;
        }
        
        
        }
        figure.snip0015 * {
          -webkit-box-sizing: border-box;
          box-sizing: border-box;
        }
        figure.snip0015 img {
          opacity: 1;
          width: 100%;
          -webkit-transition: opacity 0.35s;
          transition: opacity 0.35s;
        }
        figure.snip0015 figcaption {
          position: absolute;
          bottom: 0;
          left: 0;
          padding: 3em 3em;
          width: 100%;
          height: 100%;
        }
        figure.snip0015 figcaption::before {
          position: absolute;
          top: 50%;
          right: 30px;
          bottom: 50%;
          left: 30px;
          border-top: 1px solid rgba(255, 255, 255, 0.8);
          border-bottom: 1px solid rgba(255, 255, 255, 0.8);
          content: "";
          opacity: 0;
          background-color: #ffffff;
          -webkit-transition: all 0.4s;
          transition: all 0.4s;
          -webkit-transition-delay: 0.6s;
          transition-delay: 0.6s;
        }
        figure.snip0015 h5,
        figure.snip0015 p {
          margin: 0 0 5px;
          opacity: 0;
          -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
          transition: opacity 0.35s, -webkit-transform 0.35s, -moz-transform 0.35s, -o-transform 0.35s, transform 0.35s;
        }
        figure.snip0015 h5 {
          word-spacing: -0.05em;
          font-weight: 300;
          text-transform: uppercase;
          -webkit-transform: translate3d(0%, 50%, 0);
          transform: translate3d(0%, 50%, 0);
          -webkit-transition-delay: 0.3s;
          transition-delay: 0.3s;
        }
        figure.snip0015 h5 span {
          font-weight: 800;
        }
        figure.snip0015 p {
          font-weight: 200;
          -webkit-transition-delay: 0s;
          transition-delay: 0s;
        }
        figure.snip0015 a {
          left: 0;
          right: 0;
          top: 0;
          bottom: 0;
          position: absolute;
          color: #ffffff;
        }
        figure.snip0015:hover img {
          opacity: 0.35;
        }
        figure.snip0015:hover figcaption h5 {
          opacity: 1;
          -webkit-transform: translate3d(0%, 0%, 0);
          transform: translate3d(0%, 0%, 0);
          -webkit-transition-delay: 0.3s;
          transition-delay: 0.3s;
        }
        figure.snip0015:hover figcaption p {
          opacity: 0.9;
          -webkit-transition-delay: 0.6s;
          transition-delay: 0.6s;
        }
        figure.snip0015:hover figcaption::before {
          background: rgba(255, 255, 255, 0);
          top: 30px;
          bottom: 30px;
          opacity: 1;
          -webkit-transition-delay: 0s;
          transition-delay: 0s;
        }
            <div class='container'>
          <figure class="snip0015">
            <img src="http://open-sky.org/images/rough.jpg" alt="sample38"/>
            <figcaption>
        <p>&nbsp;</p>
                <h5>- Roughnecks -</h5>
                <a href="http://www.open-sky.org/index.php/roughnecks"></a>
            </figcaption>           
        </figure>
        <figure class="snip0015">
            <img src="http://open-sky.org/images/long.jpg" alt="sample38"/>
            <figcaption>
        <p>&nbsp;</p>
                <h5>- Longistics -</h5>
                <a href="http://www.open-sky.org/index.php/longgistics"></a>
            </figcaption>           
        </figure>
        <figure class="snip0015">
            <img src="http://open-sky.org/images/rnd.jpg" alt="sample38"/>
            <figcaption>
        <p>&nbsp;</p>
                <h5>- Research & Development -</h5>
                <a href="http://www.open-sky.org/index.php/r-d"></a>
            </figcaption>           
        </figure>
        <figure class="snip0015">
            <img src="http://open-sky.org/images/force.jpg" alt="sample38"/>
            <figcaption>
        <p>&nbsp;</p>
                <h5>- F.O.R.C.E. -</h5>
                <a href="http://www.open-sky.org/index.php/force"></a>
            </figcaption>           
        </figure>
        <figure class="snip0015">
            <img src="http://open-sky.org/images/med.jpg" alt="sample38"/>
            <figcaption>
        <p>&nbsp;</p>
                <h5>- Trauma -</h5>
                <a href="http://www.open-sky.org/index.php/trauma"></a>
            </figcaption>           
        </figure>
        </div>
    Login or Signup to reply.
  2. 0

    The images were not centered because the figure elements were inline-blocks with no proper container for layout control, and the flexbox container was missing.

    Solution: I wrapped the images in a flex container (.image-container), used display: flex to center the figures horizontally, and added flex-wrap: wrap for responsiveness across different screen sizes.

    /* Ensure the container is centered */
.image-container {
  display: flex;
  justify-content: center;  /* Horizontally centers all the figure elements */
  flex-wrap: wrap;           /* Allows the figures to wrap on smaller screens */
  gap: 20px;                 /* Optional, to add space between the figures */
  padding: 20px;             /* Optional, to add padding around the container */
  align-items: center;       /* Optional, if you need vertical centering */
}

figure.snip0015 {
  display: inline-block;
  margin-left: auto;
  margin-right: auto;
  color: #fff;
  position: relative;
  width: 100%;
  max-width: 340px;          /* Max width of each figure */
  max-height: 200px;         /* Max height of each figure */
  background: #000000;
  text-align: center;
  overflow: hidden;
}

figure.snip0015 * {
  box-sizing: border-box;
}

figure.snip0015 img {
  opacity: 1;
  width: 100%;  /* Ensures the image fills the figure */
  -webkit-transition: opacity 0.35s;
  transition: opacity 0.35s;
}

figure.snip0015 figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 3em 3em;
  width: 100%;
  height: 100%;
}

figure.snip0015 a {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  position: absolute;
  color: #ffffff;
}

figure.snip0015:hover img {
  opacity: 0.35;
}

figure.snip0015:hover figcaption h5 {
  opacity: 1;
}

figure.snip0015:hover figcaption::before {
  background: rgba(255, 255, 255, 0);
  top: 30px;
  bottom: 30px;
  opacity: 1;
}
    <div class="image-container">
  <figure class="snip0015">
    <img src="http://open-sky.org/images/rough.jpg" alt="sample38" />
    <figcaption>
      <p>&nbsp;</p>
      <h5>- Roughnecks -</h5>
      <a href="http://www.open-sky.org/index.php/roughnecks"></a>
    </figcaption>
  </figure>
  
  <figure class="snip0015">
    <img src="http://open-sky.org/images/long.jpg" alt="sample38" />
    <figcaption>
      <p>&nbsp;</p>
      <h5>- Longistics -</h5>
      <a href="http://www.open-sky.org/index.php/longgistics"></a>
    </figcaption>
  </figure>

  <figure class="snip0015">
    <img src="http://open-sky.org/images/rnd.jpg" alt="sample38" />
    <figcaption>
      <p>&nbsp;</p>
      <h5>- Research & Development -</h5>
      <a href="http://www.open-sky.org/index.php/r-d"></a>
    </figcaption>
  </figure>

  <figure class="snip0015">
    <img src="http://open-sky.org/images/force.jpg" alt="sample38" />
    <figcaption>
      <p>&nbsp;</p>
      <h5>- F.O.R.C.E. -</h5>
      <a href="http://www.open-sky.org/index.php/force"></a>
    </figcaption>
  </figure>

  <figure class="snip0015">
    <img src="http://open-sky.org/images/med.jpg" alt="sample38" />
    <figcaption>
      <p>&nbsp;</p>
      <h5>- Trauma -</h5>
      <a href="http://www.open-sky.org/index.php/trauma"></a>
    </figcaption>
  </figure>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search