Tribute Page - Build a Tribute Page

Tell us what’s happening:
Hello everyone.

I am sorry, but I am having problems making the figcaption text aligning at the center of the page, and not on the right of it.
I tried several alignement options, and text alignement options too, but nothing worked.

Could you please help me?

Also, could you please provide me with an honest feedback on my code?

Thanks in advance for your help on this matter!

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <title id="title">Tribute Page</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <main id="main">
      <div>
        <h1>Mathieu Palmesani</h1>
        <p>The man who made my life better!</p>
        <figure id="img-div">
          <img id="image" src="https://media.licdn.com/dms/image/C5603AQEkrxElwOkOmg/profile-displayphoto-shrink_800_800/0/1567781880443?e=2147483647&v=beta&t=6AE2A7n27VI9xi0qwEuAPj5fLt0bqJO3H6KiVDiA5C0" alt="Photo of Mathieu Palmesani">
          <figcaption id="img-caption">Mathieu Palmesani is an amazing human beign who loves traveling, wondering around the world, and who has the special power of making people happy.
          </figcaption>
        </figure>
      <section>
        <h3 id="tribute-info">Here's a time line of Mathieu Palmesani's life:
        </h3>
        <ul>
          <li><strong>1986</strong> - Born in Corsica, France.</li>
          <li><strong>2000</strong> - Starts traveling around the world.</li>
          <li><strong>2016</strong> - Bought his first appartement</li>
          <li><strong>2018</strong> - Left his work, for a 6 months World Tour. </li>
          <li><strong>2019</strong> - Met the love of his life, Alice Mazzone. </li>
          <li><strong>2021</strong> - Asked her to get married. She said yes! </li>
          <li><strong>2024</strong> - Started his second world tour with the love of his life. </li>
        </ul>
        <p><i>"Bébé tigre feroce de la morte qui tue par la Chundra!"</i>
        </p>
        <cite>-- Famiglia Mazzone</cite>
      </section>
      <h3>Please learn more about this amazing person via his <a id="tribute-link" href="https://ch.linkedin.com/in/mathieu-palmesani-915aa227" target="_blank">Linkedin</a> account.</h3>
    </main>
  </body>
</html>
/* file: styles.css */
body {
  font-family: Segoe UI, Arial, sans-serif;
  font-size: 1.5rem;
  line-height: 1.4;
  text-align: center;
  color: #333;
}

main {
  margin: 30px 80x;
  padding: 15px;
  border-radius: 1%;
  background: #eee;
}

figure {
  background: white;
  padding: 10px;
  margin: 0;
}

img {
  display: block;
  margin: 0 auto;
}

#image {
  max-width: 100%;
  height: auto;
  align: inherit;
}

figcaption {
  text-align: center;
}

#img-caption {
  font-size: 24px;
  text-align: justify;
  margin-top: 10px;
}

section {
  display: block;
}

ul {
  max-width: 550px;
  margin: 0 auto 50px auto;
  text-align: left;
  line-height: 3;
}

h3 {
  display: block;
  font-family: roboto, sans-serif;
  font-size: 1.2rem;
  font-weight: bold;
  margin-top: 10px 10px 10px 10px;
}

a {
  text-decoration: none;
}

a:link {
  color: blue;
}

a:visited {
  color: red;
}

a:hover {
  color: black;
}

a:active {
  color: green;
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/111.0.0.0 Safari/537.36

Challenge: Tribute Page - Build a Tribute Page

Link to the challenge:

Hi!

Please Tell us what’s happening in your own words.

Learning to describe problems is hard, but it is an important part of learning how to code.

Also, the more you say, the more we can help!

Hello @Griff ,

Sorry, but this is my first time publishing directly from the project I am having problems with, and I didn’t know where the text should be added. I modified my thread.

Thanks a lot!

1 Like

Right so

Your fig caption is set to align the text to the centre.

figcaption {
  text-align: center;
}

Your img-caption is set to align the text as justified. Whatever element you give the id of img-caption will have its text aligned justified.

#img-caption {
  font-size: 24px;
  text-align: justify;
  margin-top: 10px;
}

CSS will choose the styling that is lowest down in the file when there is a conflict. So it is choosing to align the text center because the img-caption is lower down in the file and sets the text of the figcaption to justify.

<figcaption id="img-caption">Mathieu Palmesani is an amazing human beign who loves traveling, wondering around the world, and who has the special power of making people happy.
          </figcaption>

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.