Forum |  HardWare.fr | News | Articles | PC | Prix | S'identifier | S'inscrire | Shop Recherche
1856 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Centrer des éléments

 



 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Centrer des éléments

n°2268072
letakin
Posté le 19-10-2015 à 16:30:26  profilanswer
 

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 :
  1. <div style="text-align:center; display:table;">
  2.      <span style="float:left; width:48px; vertical-align:middle;"><a (...)><img src="/precedent.png" alt="Précédent" /></a></span>
  3.      <span style="float:left; vertical-align:middle;"><img src="/monimage.png" alt="Mon image" /></span>
  4.      <span style="float:left; width:48px; vertical-align:middle;"><a (...)><img src="/precedent.png" alt="Précédent" /></a></span>
  5. </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 !

mood
Publicité
Posté le 19-10-2015 à 16:30:26  profilanswer
 

n°2268110
mrdus
Posté le 20-10-2015 à 10:55:36  profilanswer
 

bonjour,
essayes ça :  

Code :
  1. <div style="text-align:center;">
  2.      <span style="float:left;  vertical-align:middle;"><a><img width:"48px" src="/precedent.png" alt="Précédent" /></a></span>
  3.      <span style="float:right; vertical-align:middle;"><a><img width:"48px" src="/precedent.png" alt="Suivant" /></a></span>
  4.      <span style="vertical-align:middle;"><img src="/monimage.png" alt="Mon image" /></span>
  5. </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
n°2268121
letakin
Posté le 20-10-2015 à 11:52:21  profilanswer
 

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.

n°2268122
mrdus
Posté le 20-10-2015 à 12:30:05  profilanswer
 

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

n°2268128
rufo
Pas me confondre avec Lycos!
Posté le 20-10-2015 à 13:50:35  profilanswer
 

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 Cantine Calandreta : http://sourceforge.net/projects/canteen-calandreta
n°2271209
vodkadream
Posté le 09-12-2015 à 13:48:49  profilanswer
 

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:


Aller à :
Ajouter une réponse
  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 horizontalementdéverser des éléments d'une liste à l'autre
Création d'une liste d'éléments liés à un id inputAfficher/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 souslisteMenu déroulant qui affiche d'autres éléments dans les sous pages
Plus de sujets relatifs à : Centrer des éléments


Copyright © 1997-2018 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR