Centrer 3 boutons [Fermé]

Signaler
-
Messages postés
8319
Date d'inscription
jeudi 22 mars 2007
Statut
Contributeur
Dernière intervention
18 juillet 2018
-
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

<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

Messages postés
8319
Date d'inscription
jeudi 22 mars 2007
Statut
Contributeur
Dernière intervention
18 juillet 2018
1 400
Salut,

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
Messages postés
2370
Date d'inscription
lundi 11 février 2013
Statut
Membre
Dernière intervention
10 mars 2020
431
Les éléments de type block tel que div prennent par défaut toute la largeur disponible, appliquer un width: 100% sur un div n'est donc pas recommandé et peut poser des problèmes à cause des marges.
Plus d'info : https://blog.goetter.fr/2011/11/30/width-100-tu-es-le-mal/
Messages postés
8319
Date d'inscription
jeudi 22 mars 2007
Statut
Contributeur
Dernière intervention
18 juillet 2018
1 400
Merci pour l'article
Messages postés
2370
Date d'inscription
lundi 11 février 2013
Statut
Membre
Dernière intervention
10 mars 2020
431
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,
Merci à vous.
Problème réglé