[CSS] Alignement vertical du texte

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par 7804j, 20 Avril 2011.

  1. 7804j
    7804j WRInaute discret
    Inscrit:
    20 Avril 2011
    Messages:
    167
    J'aime reçus:
    0
    Bonjour,

    J'ai essayé de créer une div qui, quand je l'appelle, va afficher un texte d'aide. Pour cela, je voulais mettre une image (contenant un point d'interrogation) en background et centrée par rapport au texte :
    Code:
    <div class="aide">Texte d'aide</div>
    Code:
    .aide {
    background-image: url(/images/aide.png);
    background-position: left center;
    min-height: 64px;
    margin-left: 30px;
    padding-left : 70px;
    background-repeat: no-repeat;
    display: inline-block;
    vertical-align:middle; 
    }	
    Mais malheureusement, le texte ne s'aligne pas verticalement : il commence tout en haut du div (donc en haut de mon image)...

    Si qqn voit une erreur, merci :)
     
  2. smorge
    smorge WRInaute occasionnel
    Inscrit:
    17 Juin 2009
    Messages:
    442
    J'aime reçus:
    0
    Essaie line-height : 64px; au lieu de vertical-align:middle; ?
     
  3. 7804j
    7804j WRInaute discret
    Inscrit:
    20 Avril 2011
    Messages:
    167
    J'aime reçus:
    0
    L'idée n'est pas mauvaise mais ça ne joue pas à partir du moment où on a plus d'une ligne ^^'
     
  4. smorge
    smorge WRInaute occasionnel
    Inscrit:
    17 Juin 2009
    Messages:
    442
    J'aime reçus:
    0
    Oui, je croyais que tu voulais juste aligner "texte d'aide" :)
     
  5. 7804j
    7804j WRInaute discret
    Inscrit:
    20 Avril 2011
    Messages:
    167
    J'aime reçus:
    0
    Oui effectivement, désolé de ne pas avoir précisé. Mon texte peut avoir n'importe quelle taille, raison pour laquelle je n'arrive pas à l'aligner :/
     
  6. CARREZ
    CARREZ WRInaute discret
    Inscrit:
    12 Mai 2006
    Messages:
    73
    J'aime reçus:
    0
    Par défaut, on ne peux pas aligner verticalement un texte dans une div en CSS.

    Tu peux utiliser display: table-cell; et le vertical-align, ça devrait marcher sur les vrais navigateurs, pas sur IE6, et IE7 (qu'à partir de IE8).
     
  7. Supermaury
    Supermaury WRInaute discret
    Inscrit:
    25 Mars 2009
    Messages:
    144
    J'aime reçus:
    5
    Peux-tu en dire plus sur ton Div stp.
    A part sa hauteur minimale, a-t-il une largeur spécifique ?
     
  8. 7804j
    7804j WRInaute discret
    Inscrit:
    20 Avril 2011
    Messages:
    167
    J'aime reçus:
    0
    Erf, j'ai essayé ta proposition mais du coup, quand il n'y a pas assez de texte, l'image ne s'affiche plus en entier. Apparemment la propriété min-heigth ne fonctionne plus avec table-cell :/

    Tu dis qu'on ne peut pas aligner du texte verticalement dans une div ? Alors dans quel cas utilise-t-on "vertical-align" ?
     
  9. Supermaury
    Supermaury WRInaute discret
    Inscrit:
    25 Mars 2009
    Messages:
    144
    J'aime reçus:
    5
    Au lieu de te prendre la tête avec le centrage vertical dans le div, essaie ça qui passe partout.
    Faut juste que l'addition de ton padding top et bottom soit plus grand que la hauteur de ton image (dans l'exemple mon gif fait 14x24).

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Test</title>
    <style type="text/css"> 
    	.aide {
    		font:normal 11px verdana,tahoma,arial;
    		border:1px solid #d3d3d3;
    		border-radius: 15px;
    		-O-border-radius: 15px;
    		-moz-border-radius: 15px;
    		-webkit-border-radius: 15px;
    		padding:15px 15px 15px 40px;
    		background: url(aide.gif) 15px 50% no-repeat;
    		width:200px
    	}
    </style>
    </head>
    <body>
    <div class="aide">
    	Merci de bien vouloir saisir un code postal valide.<br />
    	Merci de bien vouloir saisir un code postal valide.<br />
    	Merci de bien vouloir saisir un code postal valide.<br />
    </div>
    </body>
    </html>
    
     
  10. lambi521
    lambi521 WRInaute passionné
    Inscrit:
    15 Juin 2010
    Messages:
    1 476
    J'aime reçus:
    0
    Ou sinon tu fais un <table><tr><td>, pas de tonnes de csss et ton vertical-align fonctionnera !
     
  11. 7804j
    7804j WRInaute discret
    Inscrit:
    20 Avril 2011
    Messages:
    167
    J'aime reçus:
    0
    Merci, ton bout de code fonctionne très bien et a en plus un meilleur rendu que ce à quoi je m'attendais ! Je n'avais pas pensé à arrondir les bords, mais malheureusement cela ne marche bien sûr pas sur IE (j'ai pas testé sur la version 9 mais ça m'étonnerait aussi).
     
  12. Blount
    Blount WRInaute impliqué
    Inscrit:
    18 Novembre 2010
    Messages:
    701
    J'aime reçus:
    0
    Je dirais même :
    Code:
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    border-radius: 15px;
    
    Webkit est utilisé en autre par Safari et Chrome/Chromium, donc il ne faut pas l'ignorer.
     
  13. Supermaury
    Supermaury WRInaute discret
    Inscrit:
    25 Mars 2009
    Messages:
    144
    J'aime reçus:
    5
  14. 7804j
    7804j WRInaute discret
    Inscrit:
    20 Avril 2011
    Messages:
    167
    J'aime reçus:
    0
    Merci pour ta précision, je ne connaissais pas l'existence des htc.

    J'ai donc essayé de l'implanter sur une de mes pages (en construction) mais malheureusement, au lieu de d'arrondir les bords, cela m'a fait disparaître toute la bordure et l'image de fond de la div ^^'

    Tu peux comparer entre Chrome et IE8 : http://petitsjobs.ch/membres/inscription.php

    Mon CSS me semblait pourtant correct :
    Code:
    .aide {
    
    
    font:normal 11px verdana,tahoma,arial;
    color: #347ab1;
          border:1px solid #d3d3d3;
          border-radius: 15px;
          -O-border-radius: 15px;
          -moz-border-radius: 15px;
          -webkit-border-radius: 15px;
    	  -khtml-border-radius: 15px;
    	  behavior: url(/app/border-radius.htc); 
          padding-left:85px;
    	  padding-top: 25px;
    	  padding-bottom:25px;
    	  margin-right:20px;
          background: url(/images/aide.png) 15px 50% no-repeat;
    
    }	
     
  15. Supermaury
    Supermaury WRInaute discret
    Inscrit:
    25 Mars 2009
    Messages:
    144
    J'aime reçus:
    5
    Je viens de tester le second lien que je t'ai donné (celui hébergé via Google). Il pose effectivement problème avec le css.
    Essaie le premier, cela devrait fonctionner nickel.
    +++
     
  16. 7804j
    7804j WRInaute discret
    Inscrit:
    20 Avril 2011
    Messages:
    167
    J'aime reçus:
    0
    Bah...Ca fait la même chose :/
     
Chargement...
Similar Threads - [CSS] Alignement vertical Forum Date
[CSS] Alignement de cadre. Développement d'un site Web ou d'une appli mobile 24 Mai 2013
[CSS] Aligner une image à coté d'une div en display:table-cell ? Développement d'un site Web ou d'une appli mobile 2 Mai 2012
[css] Petit souci pour le menu du jour! Développement d'un site Web ou d'une appli mobile 29 Août 2010
[css] Comment centrer un bloc css? Développement d'un site Web ou d'une appli mobile 25 Août 2010
[CSS] Comment faire apparaître le sous-menu ? Développement d'un site Web ou d'une appli mobile 22 Juillet 2010
Interro surprise pour les rois du CSS : Alignement en diagonale Développement d'un site Web ou d'une appli mobile 23 Juillet 2015
Alignement des images dans une galerie de miniatures Développement d'un site Web ou d'une appli mobile 23 Janvier 2015
Alignement CSS + image Développement d'un site Web ou d'une appli mobile 17 Novembre 2012
Alignement champ et fenêtre auto-completer Développement d'un site Web ou d'une appli mobile 29 Mars 2011
probleme alignement bouton en html Développement d'un site Web ou d'une appli mobile 14 Décembre 2010