html - 将图像置于 anchor 内

Question

我正在尝试将 anchor 标记中包含的图像水平居中。我试过将它设置为一个 block 并将边距设置为自动但没有运气。我试过将它包装在一个 div 标签中并做同样的事情，仍然没有运气。甚至尝试将 img 置于 div 中的 div 中。我看了其他帖子，似乎没有任何帮助。无论我做什么，图像仍然向左对齐。

###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;
}

我在所有东西周围都加上了边框，这样我就可以看到东西放在哪里了。由于某种原因，图像似乎未包含在 div 中。这看起来应该如此简单。任何帮助将不胜感激。谢谢。

Answer 1

确保没有从父级继承的 float:left。 margin :0 自动；当你有 float:left; 时不起作用；或position:absolute；