I'm currently facing an issue where the image I'm trying to center horizontally also moves the parent div downward when I try to vertically center it using top-margin. This is not the desired outcome.
If you'd like to see what I mean, I've attached a screenshot of the problem: Here.
One possible solution could be setting the image position to absolute, but then I encounter difficulties in horizontal centering.
<div id="header">
<div id="container">
<div id="logo">
<a href="index.html"><img src="images/logo.png" /></a>
</div>
</div>
</div>
#container {
width: 960px;
margin: 0 auto;
position: relative;
}
#logo {
height: 96px;
width: 484px;
margin: 50px auto;
}
Your assistance would be greatly appreciated! Thank you!