Tribute Page - Build a Tribute Page

Tell us what’s happening:

Would you help me out how to centered my image in the tribute page build

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Tribute Page</title>
  <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <main id="main">
      <h1 id="title">The Ideal Of Creative</h1>
  <legend>The Forum Of Psychology innovative</legend>     
      <figure id="img-div">
        <img  id="image" src="https://via.placeholder.com/400/photo-science/1.jpg" alt=" group of science image">
        <figcaption id="img-caption">In The field Of Science, They Had A Technical Methoud Of Controlling The Would With Creative Dexterity.</figcaption> 
        </figure >
        <div id="tribute-info"><p>The best course to practice in science.</p>
        <ul>
          <li>Coding skill: Is a comprehensive and knewledgeable understanding to understand the basis of a code to makes it unify to generate the page. </li>
          <li>Data science: Data science involves analyzing and interpreting complex data to extract meaningful insight. it uses stastistical, computational, mechanic learning techniques to solve problem, inform decision-making, and drive innovation across various industries. </li>
          <li>Digital analyse: digital analysis involves examinig digital data to gain insight into user bahavior, marketing effectivenass, and operational effiency. it uses tools and techniques to interpret metrics from websites, apps, and other digital platforms.</li>
          <li>Telescope: a telescope is an optical instrument designed to make distant objects appear nearer. it works by gathering and focusing light, allowing astronomers to observe celestial bodies such as stars, planets, and galaxies.</li>
          <li>Architect: an architect designs building and other structures, focusing on aesthetics, functionality, and safety. They work on planning, construting and overseeing projects, ensuring they meet client needs and requlatory standard.</li>
          <li>Chemistry: chemistry is the scientific study of substance and their interaction. it explores the compositon,structure, properties, and changes of matter, playing a crucial role in various field like medicine, engineering, and enviromental science.</li>
          <li>Nursing: nursing is a healthcare profession focused on caring for individual, families, and communities. Nurses provide medical care, support patient recovery, amd promote health education, working in various setting like hospitals, clinics and homes</li>
          <li>Digital marketing: digital marketing utilizes online platforms to promote products and services. it encompasses strategies like SEO, social media marketing, email campaigns, and content marketing to reach and engage target audiences.</li>
          <li>Salesforce: salesforce is a cloud-based customer relationship management (CRM)platform. it helps businesses manage customer interactio, streamline processes, and improve profitability through tools for sales, service, marketing, and analytics.</li>

          </ul>
        </div>
        <a id="tribute-link" href="https://en.wikipedia.org/wiki/creative_methoud" target="_blank">If you have time, you should read more about this scientifi innovative on his page</a>
        </main>
    </body>
    </html>
/* file: styles.css */
    body {
  font-family: Arial,sans-serif;
  text-align: center;
  margin: 0;
  padding: 0;
  background: #23b1b1;
  }
  #legend {
   text-align: center;
   padding: 30px;
        }
#main {
  padding: 20px;
  margin: 0 auto;
  width: 80%;
}
#title {
  font-size: 2em;
  margin-bottom: 20px;
  }
#image {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
  }

  #img-div {
   display: flex;
                       justify-content: center;
    align-items: center;
    height: 100vh;
      }
  #img-caption {
    margin: 20px;
    font-style: italic;
    color: white;
  }
  #tribute-info {
    margin: 20px 0;
  }
  #tribute-link {
    display: block;
    margin: 20px 0;
    color: blue;
    text-decoration: none; 
  }

Your browser information:

User Agent is: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36

Challenge Information:

Tribute Page - Build a Tribute Page

2 Likes

Hello,
it is because of this rule,

#img-div  {
   display: flex;
   justify-content: center;
   align-items: center;
   height: 100vh;
}

If you remove it, everything should work properly

the flex you are using is fine, but you miss using the flex direction. If you don’t set it the current flex-direction will be row, and you want it to be column. Also, plz don’t use height: 100vh; it is not a good habit.