How to center img with the parent element

Please, I need help on how to center image within the parent element.

I have tried different methods but it is not working.

Please check my code below:
HTML Code:

<style>
  body{
    background-color: black;
    color: white;
    font-family: caliberi;
  }
</style>
<div id="main">
  <h1 id="title">JOHN WESLEY - AN HOLINESS PREACHER</h1>
  <div id="img-div">
    <img id="image" src="https://www.txcumc.org/files/imagelibrary/johnwesleypreachingjune2018690.jpg" alt="Picture of John Wesley">
  </div>


My CSS code:
#img-caption{
  width: 700px;
}
#image {
  max-width: 100%;
  height: auto;
  display: block;
  margin: auto auto;
}

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.

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

The code you have posted passes the centering test. I can’t really tell from the way the code was posted but this CSS…

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

…needs to be inside the <style></style> element.

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