Discussion :

[mikew69]

Bonjour,

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

Je n'arrive pas à centrer verticalement mon texte.

Code HTML:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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:

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

Merci d'avance.

[rodolphebrd]

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 css :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[mikew69]

Merci beaucoup pour ta réponses.

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

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

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 .

[Candygirl]

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 .