Sujet Précédent Sujet Suivant

Alignement vertical en CSS

Fermé
Kemich Messages postés 207 Date d'inscription jeudi 27 décembre 2007 Statut Membre Dernière intervention 11 mars 2011 - 15 févr. 2011 à 14:14
arthezius Messages postés 3538 Date d'inscription jeudi 15 mai 2008 Statut Membre Dernière intervention 11 septembre 2016 - 16 févr. 2011 à 21:03
Bonjour,

J'ai un div qui occupe une hauteur de 10% de ma page. Dans ce div j'ai une ligne de texte.
J'aimerais la centrer verticalement.

Si mon div était dimensionnée en pixels, pas de problemes, avec un line-height de la meme valeur que la hauteur de ma div, ca fonctionne.

Cependant je DOIT garder la hauteur de celui ci en %, et du coup, l'alignement vertical ne marche pas.

Quelqu'un a t'il une idée pour solutionner ce problème ?

Merci d'avance, bon codage !

5 réponses

Réponse 1 / 5
Kemich Messages postés 207 Date d'inscription jeudi 27 décembre 2007 Statut Membre Dernière intervention 11 mars 2011 22
16 févr. 2011 à 08:58
Enchanté,

Toujours pas d'idées ?
0
Réponse 2 / 5
Gariig Messages postés 194 Date d'inscription samedi 5 septembre 2009 Statut Membre Dernière intervention 4 avril 2011 9
Modifié par Gariig le 16/02/2011 à 09:13
salut

essaie d'éviter de mettre une hauteur en pourcentage sur une div
Tu peux mettre

height:auto;

c'est mieux :°
0
Réponse 3 / 5
Gariig Messages postés 194 Date d'inscription samedi 5 septembre 2009 Statut Membre Dernière intervention 4 avril 2011 9
16 févr. 2011 à 09:15
sinon ce que tu peux faire, c'est à l'intérieur de ta div, tu peux mettre un tableau en précisant height: 100%

avec une ligne <tr> et une cellule <td valign="middle">

J'espere avoir pu t'aider ;)
0
Réponse 4 / 5
Kemich Messages postés 207 Date d'inscription jeudi 27 décembre 2007 Statut Membre Dernière intervention 11 mars 2011 22
16 févr. 2011 à 11:15
Enchanté,

Je DOIT garder ce div avec une hauteur en %, je me lance ds la construction de site en %, tout est calé, mon site s'adapte bien a toute les résolutions d'écran.

J'ai essayé de bidouiller avec un tableau dans ce div, mais ca ne fonctionne pas.

D'autres idées ?
0
arthezius Messages postés 3538 Date d'inscription jeudi 15 mai 2008 Statut Membre Dernière intervention 11 septembre 2016 475
16 févr. 2011 à 12:54
Si ton bloc fait 10% en hauteur, il reste donc 90%. Si tu veux le centrer en hauteur, il te suffit de mettre un top:45%; en n'oubliant de préciser le positionnement en relatif ou absolu.
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 5
Kemich Messages postés 207 Date d'inscription jeudi 27 décembre 2007 Statut Membre Dernière intervention 11 mars 2011 22
16 févr. 2011 à 15:54
Ce n'est pas le div que je veut centrer, c'est le texte CONTENU dans ce div.

Merci quand meme.
0
arthezius Messages postés 3538 Date d'inscription jeudi 15 mai 2008 Statut Membre Dernière intervention 11 septembre 2016 475
Modifié par arthezius le 16/02/2011 à 21:05
Le principe est le même.
Tu met le texte dans un div qui sera donc invisible et tu le centre dans son container.
Par exemple, si tu avait un code de ce genre: 
<div class="bloc"> 
<p>texte</p> 
<p>texte</p> 
</div>

Si tu veux centrer le texte dans le div bloc, il te suffit de procéder comme suis: 
<div class="bloc"> 
<div class="cent_vert"> 
<p>texte</p> 
<p>texte</p> 
</div> 
</div>

Après tout ce joue dans le CSS: 
div.cent_vert{position:relative; top:50%;margin-top:-x%;}

Le x est à remplacer par la moitié de la hauteur du texte.
0

Discussions similaires

Barre verticale droite sur clavier
k_lou -
Leuide -

41 réponses
le signe " | " dans excel
zed -
Utilisateur anonyme -

4 réponses
Touche du clavier barre verticale
k_lou -
Architecte_300 -

6 réponses
trait horizontal avec du css
tipi75 -
tipi75 -

8 réponses
Barre verticale droite sur clavier mac
oui -
jeanbern -

1 réponse