align 2 images side by side and make their caption underneath them

user_17576300 0
Viewed 105

I need help making these 2 images displayed side by side, and I want the text to be underneath the images not beside it. the problem even when I make these two images display one beside one for some reason the caption come on the right of each image. Any help would be greatly appreciated. Thank you.

HTML:

  <div class="container">
    <figure id="img-div1">
      <img id="image1" src="https://www.wearethemighty.com/app/uploads/legacy/assets.rbl.ms/17317425/origin.jpg" alt="Sadam husain In his reign" style="width:50%" background-size="cover">
      <figcaption id="img-caption">
        A drawing for Sadam husain represents the period of his reign.
      </figcaption>
    </figure>
  </div>

  <div class="container2">
    <figure id="img-div2">
      <img id="image2" src="https://arc-anglerfish-arc2-prod-advancelocal.s3.amazonaws.com/public/MIE5YDG625EFNGPHMVLSL3JDKM.jpg" style="width:40%" align=flex background-size=cover>
      <figcaption id="img-caption">
        Sadam husain inside the court.
      </figcaption>
    </figure>
  </div>

CSS:

.container {
  display: inline-flex;
}

img {
  max-width: 200%;
  height: auto;
  margin: 0 auto;
  display: flex;
  justify-content: center;
}

#img-div1 {
  background: white;
  padding: 5px;
  margin: 0;
  display: inline;
}

#img-div2 {
  background: white;
  padding: 5px;
  margin: 0;
  display: flex;
  float: inline;
}

#img-caption {
  margin: 10px 0 5px 0;
}

b @media (max-width: 460px) {
  #img-caption {
    font-size: 1.4rem;
  }
}
css html
3 Answers

There are lots of techniques but a simple solution is just display: inline-flex;. see snippet below.

body {
      font-family: sans-serif;
    }

    .container {
      display: inline-flex;
      text-align: center;
    }

    img {
      max-width: 100%;
    }
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no" />

</head>

<body>

  <div class="container">
    <figure>
      <img src="https://i.stack.imgur.com/1pXOL.jpg" alt="">
      <figcaption>
        BUNNY
      </figcaption>
    </figure>

    <figure>
      <img src="https://i.stack.imgur.com/HRwWf.jpg" alt="">
      <figcaption>
        DOG
      </figcaption>
    </figure>
  </div>

</body>


</html>

user_174676690

Here's an updated solution, though not the most elegant, but I tried to keep as much of your original markup and css as possible. I also added a media query for smaller screens. This solution uses static widths in order to have some parity between the two photos....I don't think using img is ever going to give you the desired result.

Make sure to run 'full page'...there is a media query in there that will stack images in smaller viewports.

 .container {
            display: inline-flex;
        }

        @media (max-width: 900px) {
            .container {
                display: flex;
                flex-direction: column;
            }
        }


        #img-div1 {
            background: white;
            margin: 0 24px;
            background-image: url("https://www.wearethemighty.com/app/uploads/legacy/assets.rbl.ms/17317425/origin.jpg");
            background-size: cover;
            width: 550px;
            height: 300px;
        }

        #img-div2 {
            background: white;
            margin: 0 24px;
            background-image: url("https://arc-anglerfish-arc2-prod-advancelocal.s3.amazonaws.com/public/MIE5YDG625EFNGPHMVLSL3JDKM.jpg");
            background-size: cover;
            width: 550px;
            height: 300px;
        }

        #img-caption {
            margin: 10px 0 5px 0;
            text-align: center;
        }

        @media (max-width: 460px) {
            #img-caption {
                font-size: 1.4rem;
            }
        }
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no" />
   
</head>

<body>

    <div class="container">
        <figure>
            <div id="img-div1">
            </div>
            <div id="img-caption">
                A drawing for Sadam husain represents the period of his reign.
            </div>
        </figure>
        <figure>
            <div id="img-div2">
            </div>
            <div id="img-caption">
                Sadam husain inside the court.
            </div>
        </figure>
    </div>
</body>


</html>

user_174676690

Ok here's another solution, in addition to the one above. With a few small tweaks you can use css grid and it will give you a bit more flexibility and I think more in line with what you were trying to do?

You'll need to add a media query to stack in smaller screens but for larger screens you should get the side by side.

.grid {
  grid-column: 1 / -1;
  grid-gap: 0;
  display: grid;
  grid-template-columns: 550px 550px;
  flex-direction: column;
  justify-content: center;
}


   
#img-div1 {
  background: white;
  background-image: url("https://www.wearethemighty.com/app/uploads/legacy/assets.rbl.ms/17317425/origin.jpg");
  background-size: cover;
  width: 550px;
  height: 300px;
}

#img-div2 {
  background: white;
  background-image: url("https://arc-anglerfish-arc2-prod-advancelocal.s3.amazonaws.com/public/MIE5YDG625EFNGPHMVLSL3JDKM.jpg");
  background-size: cover;
  width: 550px;
  height: 300px;
}

#img-caption {
  margin: 10px 0 5px 0;
  width: 550px;
  text-align: center;
}

@media (max-width: 460px) {
  #img-caption {
  font-size: 1.4rem;

  }
}
<!DOCTYPE html>
    <html>

    <head>
        <meta charset="UTF-8">
        <meta name="viewport"
            content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no" />
       
    </head>

    <body>

        <div class="grid">
            <figure>
                <div id="img-div1">
                </div>
                <div id="img-caption">
                    A drawing for Sadam husain represents the period of his reign.
                </div>
            </figure>
            <figure>
                <div id="img-div2">
                </div>
                <div id="img-caption">
                    Sadam husain inside the court.
                </div>
            </figure>
        </div>
    </body>


    </html>

user_174676690
Related