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

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Centrer un texte Verticalement sans se soucier du line-height

 



 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Centrer un texte Verticalement sans se soucier du line-height

n°1192053
gatsusat
Posté le 05-09-2005 à 10:28:42  profilanswer
 

J'ai une liste à puce
<ul><li></li></ul>
 
à chaque puce il y a un texte qui s'affiche sur une ou deux lignes.
Je dois centrer verticalement le texte quand celui-ci ne passe que sur une ligne, le bémol, c'est que la puce est une image en background qui fait au minimum 24 px, et donc je dois passer la taille de mon bloc à 24px, et aussi le min-heigt à 24px.
Mais le problème qui se pose c'est que le texte reste calé en haut de mon bloc LI, et non centré malgré l'utilisation du vertical-align.  
Mais bien entendu, le vertical-align ne permet de centrer les élément que par rapport à la hauteur de la ligne, d'où l'utilisation d'un line-height:24px, mais si le texte passe à 2 lignes cela casse totalement la mise en page de départ.
 
le code

Code :
  1. HTML:
  2. <ul>
  3. .....
  4. <li class="Alerte">Conseil en gestion</li>
  5. ...
  6. </ul>
  7. CSS :
  8. .LibAnnonce UL LI.Alerte{
  9. background-position: left top;
  10. _height:24px;/*Pour IE*/
  11. min-height:24px;/*pour les navigateurs respectueux des standards*/
  12. line-height: 110%;
  13. vertical-align: middle;
  14. }
  15. .Alerte{
  16. text-align:left;
  17. padding-left:25px;
  18. background:url(../Images/Pictos/Alerte.jpg) no-repeat left top;
  19. }


 
si quelqu'un à une idée lumineuse je suis tout ouïe.

mood
Publicité
Posté le 05-09-2005 à 10:28:42  profilanswer
 

n°1192221
olivthill
Posté le 05-09-2005 à 13:34:54  profilanswer
 

Peut-être en essayant

background-position: left center;

n°1192239
gatsusat
Posté le 05-09-2005 à 13:49:46  profilanswer
 

c'est pas le background que je veux centrer, ça il l'est déjà depuis longtemps, c'est le texte.
jusqu'à maintenant j'utilisait le ligne height, mais là ca pose grandement problème.

n°1192305
sibelius
Vous êtes sûr ?
Posté le 05-09-2005 à 14:35:48  profilanswer
 

La solution idéale est de combiner :
- display : table-cell
- vertical-align : center
 
Ça résoud parfaitement le problème... aheum sauf sur *certains* navigateurs un peu disons en retard comme IE6 (et le futur IE7 apparemment aussi)


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
n°1192313
gatsusat
Posté le 05-09-2005 à 14:41:09  profilanswer
 

ben oué j'y avais pensé, et j'aimerai bien faire des mises en page avec des tabele-cell, mais ya toujours un putain de navigateur de merde (IE6) qui ne veut rien savoir

n°1239406
Nigel_
Posté le 05-11-2005 à 18:14:53  profilanswer
 

Ah ben tiens, je n'avais pas vu que le problème avait déjà été posé ici sur des <li> :P
J'ai exactement le même problème ici:
http://forum.hardware.fr/hardwaref [...] 9674-1.htm


---------------
RPGamers, la passion du RPG : http://www.rpgamers.fr
n°1243057
gravastar_​bureau
vive la mise en page en tab...
Posté le 10-11-2005 à 12:15:46  profilanswer
 

gatsusat a écrit :

ben oué j'y avais pensé, et j'aimerai bien faire des mises en page avec des tabele-cell, mais ya toujours un putain de navigateur de merde (IE6) qui ne veut rien savoir


 
Je vais sûrement dire une connerie, mais... un padding-top ça ne decalerait pas ton texte vers le bas ?

n°1243081
mechkurt
Posté le 10-11-2005 à 12:28:24  profilanswer
 

bien sur que l'on peut modifier le padding-top (ou le margin d'ailleurs) mais ca ne regle le Pb que pour un cas de figure (un ligne ou deux ligne) or si on veut pouvoir afficher aussi bien les deux cas de figure ca ne résoud rien!
 
+1 pour trouver une soluce!
 
gatsusat, toi qui est le pro du javascript tu peux pas nous faire un javascript qui teste le nb de caracteres d'un champs, qui en deduit le nb de ligne pour adapter le padding / margin  :D


---------------
D3
n°1243089
omega2
Posté le 10-11-2005 à 12:35:04  profilanswer
 

mechkurt > Et comment tu fais pour savoir la taille que vont prendre chaque caractére (un i prend moins de place qu'un W) sachant que les navigateurs peuvent être réglé avec de nombreuses tailles de caractéres et que la taille de la fenêtre varira d'un visiteur à l'autre?

n°1243130
mechkurt
Posté le 10-11-2005 à 13:33:09  profilanswer
 

damn it!
 
bon en fait c'était plus une soluce a la con, et je m'attendais pas plus que ca à une réponse sérieuse...
 
EDIT:en même temps avec une police a chasse fixe et dans un champs dont on connait la largeur...
 
...me cherché pas, je suis déjà dehors  :whistle:


Message édité par mechkurt le 10-11-2005 à 13:33:47

---------------
D3

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Centrer un texte Verticalement sans se soucier du line-height

 

Sujets relatifs
COmment envoyer un netsend a une liste de poste dans un fichier texte[ITEXT] Alignement vertical d'un texte dans un objet Cell
lien sur texte ou image ??Batch --> regrouper plusieurs fichiers texte en un seul
Texte mal placé a la 1ere ouvertureTraitement de champs texte
[php] écrire du texte a l'écran em passant par un header[MSSQL ] Recherche de texte intégral
Pb position calques/texte entre IE et FF (dream)Aligner verticalement un tableau dans un tableau en HTML....
Plus de sujets relatifs à : Centrer un texte Verticalement sans se soucier du line-height


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