Tribute Page. Image problem

HTML-CSS
1

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;
}
2

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

3

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;
}
4

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.

5

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