Cannot center my img inside of a DIV?!

HTML-CSS
1

Hello,

Everything was going slowly but surely well today while I was working on my Tribute project for the Responsive Design module BUT at a point I test my code to see if I pass and BOOM 1 failure :'(! I do not understand why tbh.

Here’s my code : https://codepen.io/Tech_CA_Bro/pen/XBPaoq

OR

    <title>Responsive Web Design Projects - Build a Tribute Page by Tech</title>

    <style>
        /* GENERAL CSS */
        *{
            margin: 0; /* To Review */
        }
        body{
            font-family: Georgia, Arial;
        }
        
        /* ''HEADER'': Title-text (h1, p), img  */
        #title{
            font-family: 'Courier New', Arial;
            text-align: center;
            text-transform: uppercase;  
            background-color: rgb(217, 217, 217);
            padding: 12px;
            margin-bottom: 25px;
        }
        #ma_desc{
            font-family: 'Courier New', Arial;
            text-transform: capitalize;
            font-size: 19px;
            margin-top: 8px;
        }

        #img-div{
            text-align: center;
        }   
        #image{     
            width: 250px;   
            border-radius: 50%;
        }
        #img-caption{
            margin-top: 15px;       
            padding: 8px;
        }

        /* CONTENT: Tribute-info (headline + timeline (text-wrapper)) */
        #tribute-info{
            background-color: rgb(191, 191, 191, 0.95);
            margin-top: 30px;
            font-size: 17px;
        }
        #headline{
            text-align: center;
            padding-top: 30px;
            font-size: 24px;
            margin-bottom: 20px;
        }
        #text-wrapper{
            width: 600px;
            margin: 0 auto;
            text-align: left;
        }

        /* ''FOOTER'':  quote &link*/
        blockquote{
            text-align: center;
            padding-top: 25px;     
        }
        #tribute-link{
            padding-bottom: 15px; /* Q: Review why it works with tribute link and not linkp to put on the bottom? */
        }
        #link-p{
            border-left: 3px solid red;
            margin-top: 35px;
            padding-left: 8px; 
        }

        /* MEDIA QUERIES: img Q: Why is everything but the img and timeline responsive without media queries ?!*/
        @media screen and (max-width: 768px) {
            /* ''HEADER'' MQ: Title-text (h1, p), img  */
            img {
                max-width: 100%;
                display: block;
                height: auto;
            }
            /* CONTENT MQ: Tribute-info (headline + timeline (text-wrapper)) */
            #tribute-info{
                font-size: 2wv;
            }
            #text-wrapper{
                max-width: 90%;                   
            }
        }
    </style>
</head>
<body>
    <div id="main">
        <div id="title">
            <h1>Muhammad Ali: the boxer</h1>
            <p id="ma_desc">powerful& peaceful</p>
        </div>
        
        <div id="img-div">
            <img src="./img/ma.jpg" alt="Muhammad Ali's photo" id="image">
            <div id="img-caption">Muhammad Ali's photo</div>
        </div>
        
        <div id="tribute-info">
            <div id="text-wrapper">
                    <p id="headline"><strong>Here's a timeline of Muhammad Ali's life:</strong></p>
                    <br>

                    <ul>
                        <li>Jan. 17, 1942: Cassius Clay is born in Louisville, Kentucky.</li>
                        <br>
    
                        <li>Sept. 5, 1960: After winning three bouts in the qualifying round at the Rome 1960 Olympic Games, Cassius Clay defeats 
                        Zbigniew Pietrzykowski, of Poland, for the gold medal. Clay was just 18 when he won the gold medal by a decision.</li>
                        <br>
    
                        <li>Feb. 25, 1964: At 22, Ali defeats champion Sonny Liston in a technical knockout to win the world heavyweight boxing crown in Miami. </li>
                        <br>
    
                        <li>March 6, 1964: Cassius Clay officially changes his name to Muhammad Ali. Elijah Muhammad, a leader in the Nation of Islam, made a radio broadcast about the name change. 
                        Muhammad means “one worthy of praise.” Ali is the name of a cousin of a prophet.</li>
                        <br>
    
                        <li>Aug. 14, 1964: Ali married Sonji Roi. The marriage later ends in divorce. </li>
                        <br>
    
                        <li>April 1967: Ali refuses to join the U.S. Army citing his opposition to the Vietnam War. He is subsequently barred from boxing and his title was stripped. </li>
                        <br>
    
                        <li>Aug. 17, 1967: Ali married Belinda Boyd. After the wedding, she converted to Islam. The marriage later ends in divorce. </li>
                        <br>
    
                        <li>Oct. 26, 1970: Ali is reinstated into boxing. </li>
                        <br>
    
                        <li>March 8, 1971: “The Fight of the Century” takes place between Ali and Joe Frazier 
                        in New York’s Madison Square Garden. Frazier won by a unanimous decision in 15 rounds. 
                        The bout marked Ali’s first defeat of his pro career.</li>
                        <br>
    
                        <li>April 19, 1971: The legal fight under the case name, Cassius Marsellus Clay, Jr. v. United States was argued before the U.S. Supreme Court.</li>
                        <br>
    
                        <li>June 28, 1971: The U.S. Supreme Court reversed Ali’s 1967 conviction. </li><br>
    
                        <li>Jan. 28, 1974: Ali and Frazier have a rematch in Madison Square Garden. This time, Ali won in 12 rounds. </li>
                        <br>
    
                        <li>Oct. 30, 1974: The famed “Rumble in the Jungle” fight takes place in Zaire and Ali 
                        knocks out George Foreman in the eighth round. Ali famously tires out Foreman using the “rope-a-dope” strategy. </li>
                        <br>
    
                        <li>Oct. 1, 1975: Ali took on Frazier for a third (and final) time, this time in the Philippines. 
                        Ali beat Frazier in a TKO in the 14th round in what is forever known as “The Thrilla in Manila”.</li>
                        <br>
    
                        <li>Oct. 1, 1975: Ali’s biography, “The Greatest: My Own Story,” by Richard Durham, is published. Among the topics is in the book is the mention that Ali 
                        threw his Olympic gold medal into the Ohio River. There have been varying reports about Ali losing his medal since. </li>
                        <br>
    
                        <li>Dec. 30, 1977: Ali’s daughter, Laila, was born. She is the daughter of Ali and his third wife, Veronica Porsche. 
                        Laila went on to become a professional boxer.</li>
                        <br>
    
                        <li>Feb. 15, 1978: Ali loses to 1976 Olympic champion Leon Spinks in 15 rounds by a split decision. </li>
                        <br>
    
                        <li>Sept. 15, 1978: Ali avenges his loss earlier in the year and became 
                        the first three-time world heavyweight champion by defeating Spinks in the Louisiana Superdome. </li>
                        <br>
    
                        <li>June 27, 1979: Ali announces his retirement. </li>
                        <br>
    
                        <li>Oct. 3, 1980: Ali comes out of retirement to face Larry Holmes in Caesars Palace in Las Vegas. 
                        Holmes overmatched Ali, and Ali’s corner stopped the fight after 10 rounds. </li>
                        <br>
    
                        <li>1984: Although Ali had shown some signs he might have Parkinson’s disease, a degenerative disease of the brain, 
                        leading up to the Holmes fight in 1980, he officially is diagnosed with the ailment. </li>
                        <br>
    
                        <li>Nov. 19, 1986: Ali marries his fourth wife, Yolanda “Lonnie” Williams. </li>
                        <br>
    
                        <li>July 19, 1996: Ali lights the Olympic cauldron during the Opening Ceremony for the Atlanta 1996 Olympic Games. 
                        He also received a replacement gold medal for the one he won in 1960. </li>
                        <br>
    
                        <li>June 3, 2016: Ali dies at age 74 in Phoenix, after being hospitalized with respiratory issues.</li>
                        <br><br>
                    </ul>                
            </div>
        </div>
                    
        <blockquote>
            <i>"The best way to make your dreams come true is to wake up"</i>
            <br><br>

            <strong>- Muhammad Ali</strong>
        </blockquote>
        <br>

        <p id="link-p">For more information on Muhammad Ali, you can visit: <a href="https://www.biography.com/people/muhammad-ali-9181165" id="tribute-link" target="_blank">biography.com</a>.</p>    
    </div>
</body>

Thank you.

P.S : I believe I am missing something because I searched for an hour and did not understand what was going on.

2

I can’t see your image. It’s broken.

3

Hi, sorry that’s because I coded on VS then copy-pasted. I posted the code on the post itself :D.

5

I still can’t see the image. If you are using an image in codepen, it has to come from an online source.

6

Fixed. There should be an image now.

7

Alright, here are the changes I made and it works.

     #img-div{
                text-align: center;
                width: 33%;
                margin:0 auto;
            }   
            #image{     
                max-width: 100%;
                display: block;
                height: auto; 
                border-radius: 50%;
            }

The key takes to make image responsive is make its width 100%, display block and height auto.

Cheers

1 Like
8

@shimphillip Hey! Thanks a lot. I just changed the ‘‘width’’ to 15% because I find that 33% is a LOT for a default value ^_^.

I have a big question : can you explain what you did please ? :smiley: I understand what each line does individually but not what’s going on really if you see what I mean.

  • Tech

EDIT: Also what’s the point of media queries if we can just make everything responsible in the actual code?

9

#img-div
Width is given on parent container so that you can see your image grow and shrink (responsive).
margin:0 auto; is given so that your parent container is horizontally centered.

#image
max-width is given so that your image can stretch all the way horizontally according to the size of your parent-container.
display block is necessary to make max-width and height work.
height is given so that it can stretch or shrink vertically accoriding to parent container

And I don’t really understand your last question. Media queries is part of css which is considered actual code.

10

Thanks! What I mean is what’s the point of the media queries if you can make something responsive like what you did for the image on ALL widths and devices without media queries ? Is it to make it responsive for different sizes ? Sorry confusion lol.

11

I see.

Images are easy to make it responsive like that but what about texts? We can’t apply width:100% or height:auto to fonts and that’s why we need media queries. Also what if you want to move around elements when your screen gets bigger or smaller? like move navbar to the side instead of regular horizontal navbar?

12

Ohhhhh. When you said it I thought about chess.com or w3 it’s true that their layout is awesome when I tested it out by changing the size of my browser. THANKS A LOT BRO. I hope I’ll gain experience and become awesome frontend dev like you.

13

You can use various strategies to resize images, text, and containers (<div>, <header>, <footer>, etc) based on the size of the page to add a degree of responsiveness. But media queries can be used to actually change the layout, features, or elements of the page entirely based on the size of the page. For example, you could change images, fonts, colors, layouts, or even entire elements (including the whole page!) based on the size of the page.

A common use case is the following: On desktop, you want 3 columns of elements. On tablet or small laptops, you want 2 columns. On mobile, 1 column. I know you saw my Google mock from the other day, but resize the browser and notice how after a certain point (pretty small), the Google logo moves, the profile buttons move, the white space on the sides is removed, and some elements that were left aligned become centered.

That page was done with Grid, but even without grid you can use display: none; to remove elements from the flow of the page entirely, and because this is done in CSS you can do this based on the size of the page using media queries. For the size where it should not appear, set display to “none”, and for the size where it should appear, set display to the appropriate setting (eg. block, inline, flex, etc). In theory, you could have two “main” sections with different content and only show one based on the size of the screen. Recall that visibility: hidden; hides the item but does not remove it from the flow in the same way.

14

Alrighty thanks for the info. I will definitly save your comment because that is some valuable knowledge that I’ll need. Next project for me right now :smiley: after some sleep maybe XD. About your google mock, again… it’s beautiful.

Thanks again everyone!