Struggling to horizontally center an image within an anchor tag? Despite trying various methods like setting it as a block element, applying auto margins, and nesting divs, the image stubbornly remains aligned to the left. Even after looking at other resources for guidance, nothing seems to work.
###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;
}
Borders have been added around the elements to visualize their placement, yet the image refuses to stay centered within the div. The solution appears straightforward, but the issue persists. Any advice or assistance on this matter would be greatly appreciated. Thank you.