Photo caption not lining up under photo (html, CSS)

Question

Photo caption not lining up under photo (html, CSS)

74 views Asked by lorefiddler At 16 September 2024 at 19:13

Newbie question: I'm trying to put a photo on the right side of a website, have the text wrap around on the left, and have a photographer credit directly under the photo.

The credit is showing up on the left side above the text header instead of under the photo on the right.

Here's my html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset='UTF-8'/>
    <link rel='stylesheet' href='test.css'/>
  </head>
  <body>
    <picture>
      <img class='pic' src='images\str_pic1.JPG' alt="Person in blue shirt" />
      <figcaption class='pic'>Photo Credit: Photographer</figcaption>
    </picture>
    <div>
      <h2>Title</h2>
      <p>Text text text etc. this is the text body</p>
    </div>
  </body>
</html>

Here's my CSS:

.page {
  font-size: 100%;
  background-color: #777;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.pic {
  width: 35%;
  float: right;
  margin-left: 20px;
}

I tried putting the pic and credit in a div box & using:

.pic-box {
  display: flex;
  flex-direction: column;
}

in the CSS. This did not work.

First time asking a question here, please let me know if I can improve!

Original Q&A

There are 2 answers

Sudesh On 27 November 2022 at 03:50

please edit your .pic as below i think this is what you want!

.pic {
    width: 35%;
    float: center;
    margin-left: 20px;
  }

**John** · Accepted Answer · 2022-11-27 02:45:09

I believe this is what you want. I replaced your <picture> and figcaption with div. Divs are very easy to work with. I then gave the wrapping div (which was formerly <picture> the class of picwrapand then the former figcaption div a class of piccap simply to make it not the same class as the picture which is pic.

I then added this to your CSS:

.picwrap {
  float: right;
  text-align: center;
}

.pic {
  max-width: 35vw;
}

Here's a working example with a picture I added as well as gave it mroe text so you can see the wrapping.

.page {
  font-size: 100%;
  background-color: #777;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.picwrap {
  float: right;
  text-align: center;
}

.pic {
  max-width: 35vw;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset='UTF-8'/>
    <link rel='stylesheet' href='test.css'/>
  </head>
  <body>
    <div class="picwrap">
      <img class='pic' src='https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2F3.bp.blogspot.com%2F-h0-QmJgoc0A%2FUynUaTP3h1I%2FAAAAAAAACOI%2FrmJPmSiM388%2Fs1600%2Fjavanes2.jpg&f=1&nofb=1&ipt=2d9c6496df9f3008cb82378322a186661b08e10918f56fd1458cf7d8db784cfe&ipo=images' alt="Person in blue shirt" />
      <div class='piccap'>Photo Credit: Photographer</div>
   </div>
    <div>
      <h2>Title</h2>
      <p>Text text text etc. this is the text body   Text text text etc. this is the text bodyText text text etc. this is the text bodyText text text etc. this is the text bodyText text text etc. this is the text bodyText text text etc. this is the text bodyText text text etc. this is the text bodyText text text etc. this is the text bodyText text text etc. this is the text bodyText text text etc. this is the text bodyText text text etc. this is the text bodyText text text etc. this is the text bodyText text text etc. this is the text bodyText text text etc. this is the text bodyText text text etc. this is the text bodyText text text etc. this is the text bodyText text text etc. this is the text bodyText text text etc. this is the text bodyText text text etc. this is the text bodyText text text etc. this is the text bodyText text text etc. this is the text bodyText text text etc. this is the text bodyText text text etc. this is the text bodyText text text etc. this is the text bodyText text text etc. this is the text bodyText text text etc. this is the text bodyText text text etc. this is the text bodyText text text etc. this is the text bodyText text text etc. this is the text bodyText text text etc. this is the text bodyText text text etc. this is the text bodyText text text etc. this is the text bodyText text text etc. this is the text bodyText text text etc. this is the text bodyText text text etc. this is the text body</p>
    </div>
  </body>
</html>

TechQA.

Photo caption not lining up under photo (html, CSS)

There are 2 answers

Related Questions in HTML

Related Questions in CSS

Related Questions in FIGCAPTION

Popular Questions

Popular Tags

Trending Questions