Centrer des éléments

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Centrer des éléments

letakin

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 !

Publicité

mrdus

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

letakin

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.

mrdus

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

rufo

Pas me confondre avec Lycos!

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

vodkadream

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:

FORUM HardWare.fr

Programmation

HTML/CSS

Centrer des éléments

Sujets relatifs
Comment ajouter des éléments une list STL?	forcer l'acceptation d’éléments flash dans internet explorer
[resolu] <hr> ne veut pas se centrer horizontalement	déverser des éléments d'une liste à l'autre
Création d'une liste d'éléments liés à un id input	Afficher/Masquer éléments DIV en javascript
Comment créer un lien avec des éléments d'une base de données?	Theme wordpress artisteer : aligner les éléments d'une page et espaces
Affecter une propriété aux éléments d'une liste mais pas aux sousliste	Menu déroulant qui affiche d'autres éléments dans les sous pages
Plus de sujets relatifs à : Centrer des éléments

Page générée en 0.039 secondes