Tribute Page - Build a Tribute Page

HTML-CSS
1

some help please on how to center the image with its parent. cant seem to figure it out. thanks
Describe your issue in detail here.

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>Yoweri Museveni</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <main id="main">
      <div class="header"> 
      <h1 id="title">YOWERI MUSEVENI</h1>
     <p>Uganda's freedom fighter</p>
     </div>
     <div id="img-div">
      <img id="image" src="https://www.watchdoguganda.com/wp-content/uploads/2021/08/Museveni-k.jpg">
      <figcaption id="img-caption">Yoweri museveni in military uniform at one of the occassions to passout military officers</figcaption>
       </div> 
     <div id="tribute-info">
      <h2>These are some of the key highlights of Yoweri Museveni</h2>
      <a href="https://en.wikipedia.org/wiki/Yoweri_Museveni" id="tribute-link" target="_blank"></a>
      <div><ul>
        <li><span>1971-1978</span> He joined the Fronasa where Uganda took part in the Uganda Tanzania war.</li>
        <li><span>1980-1986</span> He formed and led the National Resistance Army which brought him into power.</li>
        <li><span>1986-1996</span> As President of Uganda carried out a number of reforms that were mostly political and economic.</li>
        <li><span>1996-Todate</span> He has organised elections and successfully beaten all his major opponets and is still president of Uganda.</li>
        </ul>
        </div>
       </div>  
    </main>
  </body>
 
  </html>

/* file: styles.css */

#image {
 display: block;
 max-width:100%;
 width:60%; 
 height:auto;

}
#img-div > #image {
  align-items: center;
}

Your browser information:

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

Challenge: Tribute Page - Build a Tribute Page

Link to the challenge:

2

To center an image horizontally use margin: 0 auto;

3

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