将图像居中放置在锚点内

Question

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.

Answer 1

Make sure there is no float:left inherited from parents. margin:0 auto; does not work when you have float:left; or position:absolute;