Toutes les questions concernant ce tutos se poseront ici.

Bonjour, bonjour,

je sèche lamentablement sur la façon de centrer verticalement un texte dans un bloc Div.
Qui aurait le petit code miraculeux ?

Centrer verticalement... tu veux dire, centrer comme ça ?

non, verticalement; ça c'est horizontalement
ça c'est text-align: center (si ! si ! je connais certains codes )

non centrer : mettre au beau milieu de mon cadre ! splacht

bref, comment par exemple on fait pour mettre un titre dans un header en plein milieu (donc centrage vertical ET horizontal) à part tatonner sur le px ou les %

Euh j'avoue que je ne sais pas si c'est possible. Lorsqu'on met un cadre à un titre, il n'est pas fait pour être très haut, il est donc simple de tatonner.
Nous allons tout de même attendre la réponse de Miettes

Elle m'avait donné un truc mais c'est parti dans la refonte

oh je vais cherché alors.

Je n'ai pas trouvé. :$ Nous allons l'attendre *Roh mary t'es nulle*

Kiri m'a répondue

Citation:

margin :auto; pour centrer pour le contenu : on ajoute: text-align:center; vertical-align:middle;

mais Miettes m'avait dit autre chose

Coucou,

vertical-align ne marche que pour les tableaux il me semble. Pour tout le reste il y a le padding.

Code:

.identifiant { padding-top: Xpx; }

Padding

mais on retombe sur un métrage précis (px) et non sur quelque chose d'automatique
apparemment, ça fonctionne le code à Kiri
mais c'était pas ça que m'avait dit Miette

* fille chiante qui suit son idée *

Coucou

Pour centrer du texte verticalement sur ton titre, on va utiliser height (pour définir la hauteur du bloc titre) et line-height (pour centrer le texte verticalement).

Par exemple :

test

Code:

<h1 style="height:400px; border: 1px solid black;line-height:400px;">test</h1>

et donc pour bien centrer le texte

test

Code:

<h1 style="height:400px; border: 1px solid black;line-height:400px;text-align:center;">test</h1>

Remarque : le height et line-height doivent avoir la même valeur

_________________

SoP Story :: 2ème votes éliminatoires

super !! merci merci

ah ouais je connaissais pas line-height

Re-bonjour

toujours le même soucis de centrage : quelqu'un saurait-il m'expliquer les règles pour utiliser les balises de centrage car une fois, c'est line-heigt qui fonctionne, une autre fois il faut mettre des vertical-align, ou bien des "text-align : center" ne fonctionnent pas dans le css mais ça fonctionne avec "center" dans le html - bref, j'y perd mon latin (que je n'ai jamais appris par ailleurs )


Merci

Alors on va essayer de tout reprendre ^^

*** Centrer un bloc (div) dans une page ou un bloc

1/ Il faut donner une largeur et/ou une hauter à ce bloc
2/ On ajoute des marges automatiques

Code:

<div style="width:200px; height:400px; margin:auto;">Mon bloc</div>

*** Centrer un texte dans un bloc ou une page (horizontal)
-> Le texte doit être dans des balises "block" (à savoir balises de hiérarchisation ou p => cela ne fonctionne pas avec le span)

Dans ce cas, on utilise un simple "text-align"

2 solutions ici :
-> soit on donne l'info dans le style de la div et dans ce cas, tout le contenu de la div sera centrée

Code:

<div style="text-align:center;">Mon bloc</div>

-> soit on donne l'info dans le style de la balise "block" et dans ce cas, seul le contenu de la balise indiquée sera centré

Code:

<h1 style="text-align:center;">Mon bloc</h1> <p style="text-align:center;">Mon bloc</p>

*** Centrer un texte dans un bloc ou une page (vertical)

Même principe qu'au dessus sauf qu'il faut aussi indiqué : la hauteur et le line-height (qui doivent être indentique)

Code:

<div style="height:100px; line-height:auto;">Mon bloc</div> <h1 style="height:100px; line-height:auto;">Mon bloc</h1> <p style="height:100px; line-height:auto;">Mon bloc</p>

*** Le vertical align ne s'utilise (à ma connaissance) que dans les tableaux

---

Je pense avoir fait le tour

_________________

SoP Story :: 2ème votes éliminatoires