2 votes

centrer une image à l'intérieur d'une ancre

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.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X