Tribute Page - Build a Tribute Page

HTML-CSS
1

Tell us what’s happening:

The test request me that my image element should be centered within its parent. I tried but I don’t understand How to solve the problem.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title> Fernando Alonso </title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="container">
  <header>
    <h1 id="title">Fernando Alonso</h1>
    <h2>"The man without limits"</h2>
    
</header>
</div>
<main id="main">
  <figure id="img-div">
    <img id="image" src="https://fotografias.lasexta.com/clipping/cmsimages01/2025/05/25/F15AE44B-0E50-424C-B8D0-4E3357408C55/fernando-alonso-monaco_104.jpg?crop=683,683,x172,y0&width=1200&height=1200&optimize=low&format=webply"> 
    <figcaption id="img-caption">"Fernando Alonso in the Monaco GP"</figcaption>
  </figure>
  <h3 id="tribute-info">"In tribute to the best Spanish driver"</h3>
  
  <ul>
    <li>Fernando Alonso Borns the 29th of July.</li>
    <li>He made his F1 debut in 2001.</li>
    <li>He won his first race in 2003.</li>
    <li>He won his first World championship in 2005.</li>
    <li>Alonso Won his Second world championship in 2006</li>
  
<p> For more information about Fernando Alonso visit <a id="tribute-link" href="https://en.wikipedia.org/wiki/Fernando_Alonso" target="_blank">here</a>.</p>

/* file: styles.css */

body {
  margin: 0;
  height: 100%; 
  display: flex;
  flex-direction: column; 
  align-items: center;     
  background-color: rgb(180, 180, 192); 
  }

.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;

}

header {
  text-align: center;
  background-color: #5048ff;
  color: white;
  margin: 0px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 70%;
  border-radius: 5%;
  padding: 20px;
  max-width: 600px;
}

header > h2 {
  font-family: Verdana;
  font-size: 80%;
}

header > h1 {
  font-family: "Comic Sans ms";
}

figure > img {
  text-align: center;
  width: 80%;
  margin-bottom: 0px;
  display: block;
  height: auto;
  max-width: 100%
}

figure > figcaption {
  text-align: center;
  background-color: black;
  margin-top: 0px; 
  font-size: 14px;
  margin-right: 65px;
  color: white;
}


main {
  width: 90%;
  max-width: 600px;
  margin-top: 20px;
  text-align: center;
  justify-content: center;
}

main > h3{
  font-family: sans-serif;
}

li{
  font-family: sans-serif;
  padding-bottom: 50px;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/137.0.0.0 Safari/537.36

Challenge Information:

Tribute Page - Build a Tribute Page

2

this is not going to work to center the image, you need to use a different thing. You could try going back through previous projects to see if you find it.

1 Like