Tribute Page. Image problem

Hello!

I’ve been having trouble trying to centre my picture on my tribute page. Any help would be appreciated.

HTML CODE

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="styles.css">
        <title id="title">Diego Maradona</title>
    </head>

    <body>
        <main id="main">
            <header>
                <h1>Diego Armando Maradona</h1>
            </header>
            <figure id="img-div">
                <img id="image" src="https://image-cdn.essentiallysports.com/wp-content/uploads/2017/03/1-diego-maradona-argentina-1982-1986-1990-and-1994-e1441374189414.jpg">
                <figcaption id="img-caption" class="img-caption">
                    Diego Maradona holding the 1986 World Cup trophy in Mexico.
                </figcaption>
            </figure>
            <section id="tribute-info">
                <h3>Here is a timeline of the history of Diego Maradona</h3>
                <ul>
                    <li>1961	Born October 30, in Buenos Aires</li>
                    <li>1970	Joins Los Cebollitas youth team</li>
                    <li>1976	Turns pro, joins Argentinos Juniors</li>
                    <li>1978	Becomes youngest player ever on Argentine national team</li>
                    <li>1980	Signs with Barcelona of the Spanish League</li>
                    <li>1984	Barcelona sells contract to Napoli of the Italian League</li>
                    <li>1986	Scores infamous "hand of God" goal in World Cup game against England</li>
                    <li>1986    Wins the World Cup with Argentina</li>
                    <li>1991	Earns 15-month suspension after testing positive for cocaine</li>
                    <li>1992	Plays for Seville in Spanish League</li>
                    <li>1993	Returns to Argentina, joins Newell's Old Boys</li>
                    <li>1994	Tests positive for ephedrine and is ejected from World Cup play</li>
                    <li>1995	Plays final season for Boca Juniors</li>
                    <li>1997	Announces retirement from professional soccer</li>
                    <li>2000	Autobiography Yo Soy El Diego becomes bestseller; relocates to Cuba for two-year period</li>
                    <li>2020    Passes away due to a heartattack</li>
                </ul>
                <h4>
                    If you would love a more detailed into the life of Maradona, you can read up on his <a id="tribute-link" target="_blank" href="https://en.wikipedia.org/wiki/Diego_Maradona">Wikipedia entry</a>
                </h4>
            </section>
        </main>
    </body>
</html>

CSS CODE

h1, h3, h4 {
    text-align: center;
}

.img-caption {
    text-align: center;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    
}

#image {
    max-width: 60%;
    height: auto;
    display: block;
    margin: 10px 0px 10px 0px;
}

#img-div {
    background: white;
    margin: auto;
    padding: 10px;
    
}

a {
    color:blue
}

a:visited {
    color: purple;
}


ul {
    margin-bottom: 50px;
    margin-left: 25%;
    text-align: left;
}

body {
    background-color: #89cff0;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    text-align: center;
    color: black;
}

There is a way to center the image using the margin property, but setting the left/right margins to 0 is not it. Do you remember the keyword you need to use to center a block level element using the left/right margins? If not, this guide might be of some interest.

Centering in CSS: A Complete Guide

Thanks for the reply. So I was able to centre the picture but now there’s loads of space on the side of the figure.

NEW CSS

h1, h3, h4 {
    text-align: center;
}

.img-caption {
    text-align: center;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    padding: 10px;
    margin: 0 auto;
    
}

#image {
    max-width: 60%;
    height: auto;
    display: block;
    margin: 0 auto;
    padding: 10px;
}

#img-div {
    background: white;
    margin: 20px;
   
    
}

a {
    color:blue
}

a:visited {
    color: purple;
}


ul {
    margin-bottom: 50px;
    margin-left: 25%;
    text-align: left;
}

body {
    background-color: #89cff0;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    text-align: center;
    color: black;
}

The figure is a block level element, so it takes up all the horizontal space it can by default. You’ll need to limit the amount of space it takes up by setting a width on it. Just be sure to make it a little bigger than the image so that the image can actually center within it or the tests will complain that you aren’t centering your image within its parent.

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