Image is not centered

HTML-CSS
1

Could anyone help me to resolve this. The Image is not centered. Refer my code and please help!

<style>
  body{
    background-colour: black;
    colour: white;
    font-family: monospace;
  }
  </style>
<div id="main">
  <h1 id="title"> Vegeta-the true underdog </h1>
  <div id="img-div">
    <a id= "tribute-link" target="_blank" href="https://www.youtube.com/results?search_query=vegeta">
     
    <img id="image" src="https://www.google.com/search?q=image+of+vegeta&rlz=1C1AWFC_enBT834BT834&tbm=isch&source=iu&ictx=1&fir=uUdN-xkSyhImvM%252CMM7SljLD1ocHHM%252C_&vet=1&usg=AI4_-kQOiTg0yYmAQcLvh009XUDsqYP-NA&sa=X&ved=2ahUKEwie-8y4h5DsAhVOVisKHZ5xAKIQ9QF6BAgKEFg&biw=1366&bih=657#imgrc=uUdN-xkSyhImvM" alt="Picture of Vegeta" width="20%" height=20%> </image>
    </a>
  
    <figcaption id="img-caption"> Vegeta is a symbol that it can be stong during the weak period considiering its strong power.</figcaption>
    </div>
  <p id="tribute-info">
    <b> Vegeta Attributes</b>
    <ul>
      <li> Resilence </li>
      <li>Fearlessness</li>
      <li> Persistence</li>
     </ul
    </p>
</div>


#img-caption
{
  width: 400px;
  
}
#image
{
  max-width:100%;
  height:auto;
  display:block;
}
2

Hello @ugyentenzin, would be greatly helpful if you could format your code to make it more accessible to read.

Here’s a guide on how to format code in the forum:

Also please consider sharing a live demo, that generally would help people greatly in speeding up the debugging process :slight_smile:

By the look of it, seems like you just placed an image element inside the body, if that’s the case, nothing is telling it to actually be centered; you are just specifying the width and height property.
Hope it makes sense :slight_smile:

1 Like
4

Please format your code or make a github repo

1 Like
5

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356Ă—380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

1 Like
6

is this part inside style tags?

1 Like
7

@ugyentenzin
The image can be aligned in center with the help of margin css property and you can set it with this : -

margin: 0 auto;

This will set the margin from top, bottom to 0 and left, right will take equal distance from both the sides i.e. left and right of image.
So, just add the same like this :

#image{
     max-width:100%;
     height:auto;
     display:block;
     margin: 0 auto;
}
8

@aditya.gupta671 Thank you. I got it rectified .I have not set margin to auto.

9

@ilenia thank you for guidance, as i am just a beginner .