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 (’).
lasjorg
September 26, 2021, 5:03pm
3
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.
system
Closed
March 28, 2022, 5:03am
4
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.