CSS: aligner verticalement du texte dans une liste

Question

Bonjour à tous,
Je voudrais faire un truc tout bête, et pourtant je n'y arrive pas.

J'ai une liste, qui est mise en forme (grâce à du CSS) en forme de bandeau, où chaque item est un rectangle. La hauteur du rectangle est plus grande que la taille d'une ligne. Et je voudrais tout simplement centrer verticalement mon texte. :s

Je ne peux pas utiliser line-height car certains items sont sur plusieurs lignes. J'ai aussi essayé vertical-align:middle, mais ça ne change rien. Comment faire alors ??

Pour voir mon problème "en vrai", c'est sur http://www.sportingclubplaisance.fr/scp-cyclisme.fr, c'est le bandeau rouge d'en haut.

Merci d'avance de votre aide :)

Pitet · Answer

Salut,

Voici une solution possible :

#menu_scp li {
    background-image: url("./images/motif_menu.png");
    border: 1px solid #FFFFFF;
    display: block;
    float: left;
    font-family: Myriad pro,Verdana;
    font-size: 12px;
    height: 33px;
    line-height: 33px; /* on définit le line-height égal à height */
    list-style-type: none;
    /* padding-top: 8px; on supprime la marge interieur*/
    text-align: center;
    width: 131px;
}

#menu_scp li a {
    color: #000000;
    text-decoration: none;
    display: inline-block; /* on affiche le texte sous forme d'un bloc (utile pour le vertical-align) */
    vertical-align: middle; /* on centre verticalement le texte */
    line-height: normal; /* on remet la hauteur de ligne par défaut */
}


Bonne journée

yoanpg · Answer

J'ai fait les modifs sur la page http://www.sportingclubplaisance.fr/scp-artsmartiaux.fr et mon texte n'est toujours pas centré verticalement :(

Ai-je fait une erreur par rapport à ton code ?

Pitet · Answer

Tu as effectivement quelques erreurs de syntaxe dans ton code css :

- pour les commentaires en css, les symboles // en début de ligne ne fonctionne pas. Tu dois entourer ton code commenté avec /* commentaire */
- la propriété text-alignement n'existe pas. Remet celle que tu utilisais avant : text-align: center;

Pour vérifier tes erreurs de syntaxe css, aide toi du validateur w3c : http://jigsaw.w3.org/css-validator/

Bonne correction ;)

yoanpg · Answer

Merci de ton aide et merci pour ce site fort utile :)

Bizarre pour les //, car quand je l'ai ajouté, mon texte est bien monté en haut du rectangle. Enfin j'ai quand même remplacé par /* */.

text-alignement corrigé par text-align (le correcteur orthographique de mon téléphone avait automatiquement complété le mot :s)

Par contre mon texte est toujours en haut du rectangle :( Il est récalcitrant !

Pitet · Answer

Apparemment le fait que tu utilises un Doctype transitionnal peut poser problème. Je te conseil de passer au HTML 5 :)

Tu as encore des erreurs dans ton code css :  http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.sportingclubplaisance.fr%2Fscp-artsmartiaux.fr%2Fwp-content%2Fthemes%2Fscp-artsmartiaux%2Fstyle.css&profile=css3&usermedium=all&warning=1&vextwarning=&lang=fr

Enfin tu peux trouver ici un bon tuto expliquant différentes technique pour centrer verticalement : https://www.alsacreations.com/tuto/lire/1032-comment-centrer-verticalement-sur-tous-les-navigateurs.html

yoanpg · Answer

En effet en HTML5 ça fonctionne avec <!DOCTYPE html> ! Merci de ton aide :)

Il faut que je vérifie que le reste continue de fonctionner correctement. Quelles peuvent être les différences sur l'affichage de passer de HTML4 à 5 ?

CSS: aligner verticalement du texte dans une liste

6 réponses

Votre réponse

Newsletters