Can't align the imagine into the center of the page

Question

HTML page code:

<main>
        <img src="https://c.tenor.com/rv04dG_HDH0AAAAi/jojo-thonk.gif" alt="Nu se incarca" />
        <br>
        <br>
        <p>O imagine mult mai smechera, si acum este aliniata </p>
        <p id="wild">SUNT complet diferit de restul paragrafelor</p>    
    </main>

CSS code:

main{
    
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
}

main > p{
    
    text-align:center;
    font-size: 20px;
    vertical-align: top;
    display: inline-block;
    text-align: center;
    width: 500px;
    
}

img {
    width: 300px;
    height: 300px;
    /*padding: 15px;*/
   
    
}
.caption {
    display: block;
}

I can't seem to align the picture into the center of the page properly, I tried removing the margin of main but I can't get anything to work.

This is how it looks: https://gyazo.com/f948f9f93ee3c448d5879a9c9eca17fb

Answer 1

Consider using flexboxes this way.

• add a class to your container

<main class="container">
        <img src="https://c.tenor.com/rv04dG_HDH0AAAAi/jojo-thonk.gif" alt="Nu se incarca" />
        <p>O imagine mult mai smechera, si acum este aliniata </p>
        <p id="wild">SUNT complet diferit de restul paragrafelor</p>    
</main>

• add styling

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column; /* change elements direction from row to column */
  gap: 20px; /* Vertical Gap instead of using <br> */
}

That should do it better than margins and paddings that may cause potential issues in other displays.

More on how to use flexboxes here.

This beautiful game should give you some practice as well :)

Answer 2

Fix to your code.

• Add text-align: center; to main
• Add max-width: 500px; width: 100%; to main>p

main {

    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
    text-align: center;
}

main>p {

    text-align: center;
    font-size: 20px;
    vertical-align: top;
    display: inline-block;
    text-align: center;
    max-width: 500px;
    width: 100%;

}

img {
    width: 300px;
    height: 300px;
    /*padding: 15px;*/


}

.caption {
    display: block;
}

<main>
    <img src="https://c.tenor.com/rv04dG_HDH0AAAAi/jojo-thonk.gif" alt="Nu se incarca" />
    <br>
    <br>
    <p>O imagine mult mai smechera, si acum este aliniata </p>
    <p id="wild">SUNT complet diferit de restul paragrafelor</p>
</main>