Centrer des éléments

Marsh Posté le 19-10-2015 à 16:30:26

Bonjour,

j'écume les forums depuis une bonne heure et un bon paquet de tests, mais je n'arrive pas à résoudre un problème pourtant tout bête !
J'ai trois éléments : deux boutons précédents / suivants de taille 48 x 48 et une image de taille variable.
J'aimerais afficher l'image au centre, et les deux boutons de part et d'autre de l'image ; le tout sur une ligne, avec les boutons centrés verticalement autour de l'image.
J'ai donc fait ceci :

Code :

<div style="text-align:center; display:table;">
<span style="float:left; width:48px; vertical-align:middle;"><a (...)><img src="/precedent.png" alt="Précédent" /></a></span>
<span style="float:left; vertical-align:middle;"><img src="/monimage.png" alt="Mon image" /></span>
<span style="float:left; width:48px; vertical-align:middle;"><a (...)><img src="/precedent.png" alt="Précédent" /></a></span>
</div>

et ça me donne n'importe quoi.
Selon ce que je modifie, j'ai les boutons latéraux décalés, le tout non-centré, des sauts de ligne... bref ! Je n'y arrive pas !

Est-ce que quelqu'un aurait la solution ?

Merci d'avance !

Reply

Marsh Posté le 19-10-2015 à 16:30:26

Reply

Marsh Posté le 20-10-2015 à 10:55:36

bonjour,
essayes ça :

Code :

<div style="text-align:center;">
<span style="float:left; vertical-align:middle;"><a><img width:"48px" src="/precedent.png" alt="Précédent" /></a></span>
<span style="float:right; vertical-align:middle;"><a><img width:"48px" src="/precedent.png" alt="Suivant" /></a></span>
<span style="vertical-align:middle;"><img src="/monimage.png" alt="Mon image" /></span>
</div>

ça devrait fonctionner je pense

edit:bon dans mon exemple le bouton "suivant" se retrouve complètement à droite de la <div> qui prend tout l'écran puisqu'aucune taille n'est spécifiée.

Message édité par mrdus le 20-10-2015 à 11:07:47

Reply

Marsh Posté le 20-10-2015 à 11:52:21

Merci, c'est bien ce que je voulais, sauf que le vertical-align n'a pas d'effet.
Les boutons latéraux sont en haut.

Reply

Marsh Posté le 20-10-2015 à 12:30:05

je crois que pour vertical-align il faut préciser un line-height ou un height

Reply

Marsh Posté le 20-10-2015 à 13:50:35

Non, pour le vertical-align, il faut être dans un tableau ou avoir précisé le height du conteneur.

Une solution est de faire passer un <div> pour une cellule de tableau via le css 3.0 : http://www.w3schools.com/cssref/pr_class_display.asp

---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta

Reply

Marsh Posté le 09-12-2015 à 13:48:49

Salut, tes éléments sont affichés en block, donc vont automatiquement à la ligne. Si tu mets "display: inline;", ils seront sur la même ligne. :whistle:

Reply

Centrer des éléments

Sujets relatifs:

Leave a Replay