How do I add a quote that's centered between an image that's on the left, and the border line that's on the right?

Question

I can't center this caption next to my image:

body {
  background-color: grey;
}

#img-div {
  width: 100%;
  max-width: 633px;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  display: block;
  border-style: outset;
  padding: 2px 500px 2px 2px;
  margin-bottom: 2em;
  text-align: center;
  border-image-width: auto;
}

#image {
  border: groove;
  max-width: 500px;
  float: left;
}

#img-caption {
  font-size: 300px;
}

figcaption {
  clear: both;
  max-width: 500px;
  font-style: italic;
}

<body>
  <div id="img-div">
    <img id="image" alt="steve Irwin" src="https://via.placeholder.com/100">

    <!-- I cant center this caption next to my image-->

    <caption id="img-caption">"We dont own planet earth, we belong to it. And we must share it with our wildlife"
      <br>
      <p>- Steve Irwin</p>
    </caption>

    <figcaption>
      "The Crocodile Hunter", Steve Irwin, poses with a three foot long alligator at the San Francisco Zoo on June 26, 2002 in San Francisco, California.
    </figcaption>
  </div>
</body>

Arnav Pandey CH · Answer 1 · 2021-12-06T19:42:20.040

Create a container (display: flex, flex-direction: column, align-items: center; justify-content: center;), and then inside put a container again but with flex-direction: row; which will contain the image and the figcaption, what the first container does is put everything in the center column-wise, and the second container will put the image and the figcaption next to each other. After you have this setup, put the caption out of the second container but inside the first container.

#img-div {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  height: auto;
  max-width: 633px;
  margin-left: auto;
  margin-right: auto;
  display: block;
  border-style: outset;
  margin-bottom: 2em;
  text-align: center;
  border-image-width: auto;
}

.row {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

body {
  background-color: grey;
}


/* 
        #img-div {
        width: 100%;
        max-width: 633px;
        height: auto;
        margin-left: auto;
        margin-right: auto;
        display: block;
        border-style: outset;
        padding: 2px 500px 2px 2px;
        margin-bottom: 2em;
        text-align: center;
        border-image-width: auto;
        } */

#image {
  border: groove;
  max-width: 500px;
  float: left;
}

#img-caption {
  font-size: 300px;
}

figcaption {
  clear: both;
  max-width: 500px;
  font-style: italic;
}

<body>
  <div id="img-div">
    <div class="row">
      <img id="image" alt="steve Irwin" src="https://via.placeholder.com/100">
      <figcaption>
        "The Crocodile Hunter", Steve Irwin, poses with a three foot long alligator at the San Francisco Zoo on June 26, 2002 in San Francisco, California.
      </figcaption>
    </div>
    <br>

    <caption id="img-caption">"We dont own planet earth, we belong to it. And we must share it with our wildlife"
      <br>
      <p>- Steve Irwin</p>
    </caption>
  </div>
</body>

Adding padding to the #img-div wont change the centering by the way, so add as much padding as you wish!

How do I add a quote that's centered between an image that's on the left, and the border line that's on the right?

1 Answers1