Centrer un texte dans un <div>

Manny42 -  
Melooo Messages postés 1405 Date d'inscription   Statut Membre Dernière intervention   -
Bonjour,

Je suis en train de développer un petit site pour mon entreprise et je suis au prise avec un bloc qui ne veut pas faire ce que je veux. :)

Je veux que le texte à l'intérieur du div soit centré autant verticalement que horizontalement, car étant un div contenant le nom et le prénom d'une personne, la taille est variable et donc peut être sur une ou deux ligne.

Pour l'instant voila ce que j'ai:

HTML
<div class="user"><span>Jean-Francois</span></div>

CSS
.user { 
 position: absolute; 
 left: 902px; 
 top: 15px; 
 font-size: 20px; 
 font-family:"ITC Avant Garde Gothic STD", cursive; 
 width: 250px; 
 text-align: center; 
 height: 50px; 
 vertical-align: middle; 
}


Pour le moment le texte est centré par le text-align, et se met sur deux ligne si je passe un nom plus long genre: "Jean Francois De la grange"
Mais si le nom est plus court, comme dans l'exemple, le texte ne se met pas au milieu du <div>, c'est à dire qu'il reste collé en haut du block, or je voudrais qu'il soit centré.

Si vous avez des idées je suis preneur!

Merci d'avance de vos réponse, bonne journée.

A voir également:

2 réponses

glodybiss Messages postés 440 Date d'inscription   Statut Membre Dernière intervention   9
 
En gros tu veux que ton texte soit centré dans la div ?
0
Manny42
 
Je suis désolé mais je n'arrive pas à voir la réponse...
0
glodybiss Messages postés 440 Date d'inscription   Statut Membre Dernière intervention   9
 
J'ai vraiment pas compris ce que tu veux faire mais essaie peu ce code

.user { 
 position: absolute; 
 font-size: 20px; 
 font-family:"ITC Avant Garde Gothic STD", cursive; 
 width: 250px; 
 text-align: center; 
 height: 50px; 
 border:1px #333 solid; 
}
0
Melooo Messages postés 1405 Date d'inscription   Statut Membre Dernière intervention   84
 
Je pense qu'il souhaite juste centrer son texte verticalement et horizontalement dans son div.
Pour cela regarde ce lien qui explique très bien :
https://www.alsacreations.com/article/lire/539-Centrer-les-elements-ou-un-site-web-en-CSS.html
0