J'essaie de centrer horizontalement une image contenue dans une balise d'ancrage. J'ai essayé de la définir comme un bloc et de régler les marges sur auto, sans succès. J'ai essayé de l'envelopper dans une balise div et de faire la même chose, mais sans succès. J'ai même essayé de centrer l'image dans la balise div dans la balise div. J'ai consulté d'autres articles, mais rien ne semble aider. L'image est toujours alignée à gauche, quoi que je fasse.
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;
}
J'ai mis des bordures autour de tout pour que je puisse voir où les choses sont placées. Il semble que l'image ne soit pas contenue dans le div pour une raison quelconque. Il semble que cela devrait être très simple. Toute aide serait la bienvenue. Merci.