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.
<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>
.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;
}
Make sure there is no float:left inherited from parents. margin:0 auto; does not work when you have float:left; or position:absolute;