Centrer 3 boutons

philippef -  
ThEBiShOp Messages postés 8411 Date d'inscription   Statut Contributeur Dernière intervention   -
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

ThEBiShOp Messages postés 8411 Date d'inscription   Statut Contributeur Dernière intervention   1 566
 
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
0
Pitet Messages postés 2826 Date d'inscription   Statut Membre Dernière intervention   527
 
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/
0
ThEBiShOp Messages postés 8411 Date d'inscription   Statut Contributeur Dernière intervention   1 566
 
Merci pour l'article
0
Pitet Messages postés 2826 Date d'inscription   Statut Membre Dernière intervention   527
 
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,
0
philippef
 
Merci à vous.
Problème réglé
0