我正在尝试将包含在锚标记中的图像水平居中。我尝试将其设置为块并将边距设置为自动,但没有成功。我已经尝试将它包装在一个 div 标签中并做同样的事情,仍然没有运气。甚至尝试将 div 中的 img 居中在 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 中。这似乎应该如此简单。任何帮助将不胜感激。谢谢。