Centrer verticalement un texte HTML/CSS

Bonjour,

J'ai un soucis dans le développement de mon site.

Je n'arrive pas à centrer verticalement mon texte.

Code HTML:

Code:

---

1 2 3 4 5 6

<div class="navigation_footer"> <ul class="menu_footer"> <li><a class="text_f" href="index.html" >ACCUEIL</a></li> <li><a class="text_f" href="depannage.html">DÉPANNAGE</a></li> </ul> </div>

---

En image: http://webzoom.fr/capture.png

Auriez vous une idée j'ai essayé pas mal de solution trouvé sur google mais sans réussite ..

Merci d'avance.

Bonjour et bienvenue,

vous pouvez centrer le texte avec un line-height dont la valeur correspondra à la hauteur de l'élément puis avec la propriété background-position pour l'image.

Exemple:

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

ul{ width: 180px; background: #555; padding:8px; } a{ display: block; width: 140px; height: 40px; padding-left: 40px; line-height:40px; border-top: 1px solid white; color: white; text-decoration: none; background: url(http://wcdn4.dataknet.com/static/resources/icons/set14/9c27ef1845e.png) no-repeat center left, black ; }

---

http://codepen.io/anon/pen/bBiDA

Merci beaucoup pour ta réponses.

Ton bout de code m'a vraiment beaucoup aidé.

Code:

---

1 2 3 4 5

a{ display:block; height:30px; line-height:30px; }

---

sont les valeurs à obligatoirement utiliser pour arriver à un align-vertical.

Merci problème résolu .

Hello,

L'image présentée n'a aucune raison d'avoir une hauteur fixe. Il faut toujours éviter de définir une hauteur en pixel pour une portion de texte puisque sa hauteur va dépendre de la taille des caractères et que tu n'as pas la maîtrise absolue de cette dernière.

Au cas où le texte d'un de tes bouton passe sur 2 lignes (si tu as une fois un libellé en deux mots) la présentation serait désastreuse.

Pour toutes ces mêmes raisons je préfère toujours jouer avec un padding-top et bottom, sans définir de height, plutôt que jouer sur un line-height .