CODEWITHSUNDEEP
htmlcss
Ahmad Aldelemy
Ahmad Aldelemy

Reputation: 13

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

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;
  }
}

Upvotes: 1

Views: 801

Answers (3)

Authentic Science
Authentic Science

Reputation: 848

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>

Upvotes: 0

Authentic Science
Authentic Science

Reputation: 848

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>

Upvotes: 1

Authentic Science
Authentic Science

Reputation: 848

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.sstatic.net/1pXOL.jpg" alt="">
      <figcaption>
        BUNNY
      </figcaption>
    </figure>

    <figure>
      <img src="https://i.sstatic.net/HRwWf.jpg" alt="">
      <figcaption>
        DOG
      </figcaption>
    </figure>
  </div>

</body>


</html>

Upvotes: 1

Related Questions