Centrer 3 boutons
Bonjour,
J'ai 3 images que je n'arrive pas à centrer avec le css. Je voudrais aussi que leur taille varie en fonction de la taille de l'écran.
code de la page
le css
Merci
J'ai 3 images que je n'arrive pas à centrer avec le css. Je voudrais aussi que leur taille varie en fonction de la taille de l'écran.
code de la page
<div align="center"><br />
<img src="troissy_historique/images/previous.jpg" alt="" class="panorama" onclick="javascript:previous(gen);" />
<a href="index.php?page=photos" rel="nofollow" target="_blank"><img src="troissy_historique/images/retour.jpg" alt="" style="cursor:pointer;margin-left:15%" /></a>
<img src="troissy_historique/images/next.jpg" alt="" style="cursor:pointer;margin-left:15%" onclick="javascript:next(gen);" />
</div>
le css
.panorama img {
cursor : pointer;
}
Merci
2 réponses
-
ContributeurSalut,
commence par faire en sorte que ta première div prenne toute la largeur de l'espace disponible
<div style="width: 100%">
ou<div style="width: auto">
après pour la hauteur de tes images, tu dois définir leur hauteur en %, si la hauteur de leur contenant varie également (ça dépend des parents tout ça...) la hauteur des images devrait varier également -
Salut,
Les éléments html <img> et <a> sont de type inline, ils peuvent donc être aligné comme du texte via la propriété css text-align.
On peut donc appliquer cette propriété sur le div parent pour centrer ces éléments.
Pour faire varier la taille en fonction de la largeur de l'écran, on peut appliquer une largeur en pourcentage aux images. Par exemple pour les 3 éléments, on peut appliquer une largeur de 30%.
Exemple : https://jsfiddle.net/2dqq99fn/
Bonne journée,
