CSS Question
centering an image inside an anchor
I am trying to horizontally center an image that is contained within an anchor tag. I have tried setting it as a block and setting margins to auto with no luck. I have tried wrapping it in a div tag and doing the same, still, no luck. Even tried centering the img within the div within the div. I looked at other posts, and nothing seems to help. The image is still aligned to the left no matter what I do.
HTML
<div id="slideWrapper">
<h1 id="slideHeading">This is a Header</h1>
<hr/>
<div class="centerMe"><a href="javascript:slidelink()" class="slideA">
<img src="./images/Slides/cheeseBoards.jpg" name="slide" id="slideImg"/></a></div>
<hr/>
<div class="centerMe">
<a href="javascript:slidelink()"class="slideA" id="slideText">Check out our services and other great stuff.</a>
</div>
</div>
CSS
.centerMe {
margin-left: auto;
margin-right: auto;
border: 1px solid green;
text-align: center;
}
#slideWrapper {
border: 1px solid blue;
}
#slideImg {
display: block;
height:500px;
width:900px;
border:1px solid red;
margin-left: auto;
margin-right: auto;
}
I put borders around everything so that I could see where things were getting placed. It seems like the image isn't being contained within the div for some reason. This seems like it should be so simple. Any help would be greatly appreciated. Thanks.
Recommended for you: Get network issues from WhatsUp Gold. Not end users.
Answer Source
Make sure there is no float:left inherited from parents. margin:0 auto; does not work when you have float:left; or position:absolute;
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download