Tribute Page - Build a Tribute Page

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">
    <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">
    <main id="main">
      <div class="header"> 
      <h1 id="title">YOWERI MUSEVENI</h1>
     <p>Uganda's freedom fighter</p>
     <div id="img-div">
      <img id="image" src="">
      <figcaption id="img-caption">Yoweri museveni in military uniform at one of the occassions to passout military officers</figcaption>
     <div id="tribute-info">
      <h2>These are some of the key highlights of Yoweri Museveni</h2>
      <a href="" id="tribute-link" target="_blank"></a>
        <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>
/* file: styles.css */

#image {
 display: block;

#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/ Safari/537.36

Challenge: Tribute Page - Build a Tribute Page

Link to the challenge:

To center an image horizontally use margin: 0 auto;

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