Centrer un texte Verticalement sans se soucier du line-height

Centrer un texte Verticalement sans se soucier du line-height - HTML/CSS - Programmation

Marsh Posté le 05-09-2005 à 10:28:42    

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.

Reply

Marsh Posté le 05-09-2005 à 10:28:42   

Reply

Marsh Posté le 05-09-2005 à 13:34:54    

Peut-être en essayant

background-position: left center;

Reply

Marsh Posté le 05-09-2005 à 13:49:46    

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.

Reply

Marsh Posté le 05-09-2005 à 14:35:48    

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
Reply

Marsh Posté le 05-09-2005 à 14:41:09    

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

Reply

Marsh Posté le 05-11-2005 à 18:14:53    

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
Reply

Marsh Posté le 10-11-2005 à 12:15:46    

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 ?

Reply

Marsh Posté le 10-11-2005 à 12:28:24    

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
Reply

Marsh Posté le 10-11-2005 à 12:35:04    

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?

Reply

Marsh Posté le 10-11-2005 à 13:33:09    

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
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed