Précédent   Forum des professionnels en informatique > Webmasters - Développement Web > CSS
CSS Forum d'entraide sur l'utilisation des feuilles de style CSS. Avant de poster : Cours CSS, FAQ CSS, Galerie CSS
Partagez cette discussion sur d'autres réseaux sociaux : Viadeo Twitter Google Facebook Digg Delicious MySpace Yahoo
Réponse Proposer ce sujet en actualité
 
Outils de la discussion
Publicité
'
Vieux 30/06/2011, 05h02   #1
Débutant
 
Avatar de koKoTis
 
Inscription : août 2006
Messages : 3 196
Détails du profil
Informations forums :
Inscription : août 2006
Messages : 3 196
Points : 1 673
Points : 1 673
Par défaut Centrer verticalement dans un div

Bonjour, est-il possible de centrer un texte verticalement dans un div ?

Si oui comment ?
koKoTis est déconnecté   Envoyer un message privé Réponse avec citation 01
Vieux 30/06/2011, 06h53   #2
Débutant
 
Avatar de koKoTis
 
Inscription : août 2006
Messages : 3 196
Détails du profil
Informations forums :
Inscription : août 2006
Messages : 3 196
Points : 1 673
Points : 1 673
J'ai ajouter ceci dans mon css, mais ca ne fonctionne pas:

Code :
   vertical-align:text-bottom;

Je vous donne le css complet du div au cas ou:

Code :
1
2
3
4
5
6
7
8
9
10
.bloc_menu_bouts {
   float: left;
   height:107px;
   width:200px;
   text-align:center;
   vertical-align:text-bottom;
   cursor:pointer; 
   background-image:url(imgs/onglet_1a.jpg); 
   layer-background-image:url(imgs/onglet_1a.jpg);
}
koKoTis est déconnecté   Envoyer un message privé Réponse avec citation 00
Vieux 30/06/2011, 07h16   #3
Modérateur
 
Avatar de Bisûnûrs
 
Josselin
Développeur Web
Inscription : janvier 2004
Messages : 9 050
Détails du profil
Informations personnelles :
Nom : Josselin
Âge : 29
Localisation : France, Rhône (Rhône Alpes)

Informations professionnelles :
Activité : Développeur Web

Informations forums :
Inscription : janvier 2004
Messages : 9 050
Points : 12 181
Points : 12 181
Il va falloir que tu apprennes à faire des recherches sur les forums ..

Dernière discussion parmi les 150 existantes sur le sujet :
http://www.developpez.net/forums/d10...cal-texte-div/
Bisûnûrs est déconnecté   Envoyer un message privé Réponse avec citation 00
Vieux 30/06/2011, 07h21   #4
Débutant
 
Avatar de koKoTis
 
Inscription : août 2006
Messages : 3 196
Détails du profil
Informations forums :
Inscription : août 2006
Messages : 3 196
Points : 1 673
Points : 1 673
Merci

J'ai fait des recherche google, j'ai tester plusieurs truc mais rien n'a fonctionner.

J'ai donc ceci:

Code :
1
2
3
4
5
6
7
8
9
10
11
12
13
.bloc_menu_bouts {
   float: left;
   height:107px;
   width:200px;
   text-align:center;
   margin:0;
   line-height:1.1; /* rétablir le line-height */
   display:inline-block;
   vertical-align:text-bottom;
   cursor:pointer; 
   background-image:url(imgs/onglet_1a.jpg); 
   layer-background-image:url(imgs/onglet_1a.jpg);
}

Mais le texte reste en haut
koKoTis est déconnecté   Envoyer un message privé Réponse avec citation 00
Vieux 30/06/2011, 07h26   #5
Modérateur
 
Avatar de Bisûnûrs
 
Josselin
Développeur Web
Inscription : janvier 2004
Messages : 9 050
Détails du profil
Informations personnelles :
Nom : Josselin
Âge : 29
Localisation : France, Rhône (Rhône Alpes)

Informations professionnelles :
Activité : Développeur Web

Informations forums :
Inscription : janvier 2004
Messages : 9 050
Points : 12 181
Points : 12 181
Je te laisse (re)lire la discussion.
Je te laisse (re)faire des recherches sur le forum.

Faut pas pousser mémé dans les orties.
Bisûnûrs est déconnecté   Envoyer un message privé Réponse avec citation 00
Vieux 30/06/2011, 07h28   #6
Débutant
 
Avatar de koKoTis
 
Inscription : août 2006
Messages : 3 196
Détails du profil
Informations forums :
Inscription : août 2006
Messages : 3 196
Points : 1 673
Points : 1 673
Désolé, j'avai mal regarder.

Donc maintenant j'ai ceci:
Code :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
.bloc_menu_bouts {
   float: left;
   height:107px;
   width:200px;
   text-align:center;
   cursor:pointer; 
   background-image:url(imgs/onglet_1a.jpg); 
   layer-background-image:url(imgs/onglet_1a.jpg);
}
 
.h1 {
   margin:0;
   line-height:1.1; /* rétablir le line-height */
   display:inline-block;
   vertical-align:text-bottom;
}
Mais là le texte et au milieux, je le voudrai en bas du div
koKoTis est déconnecté   Envoyer un message privé Réponse avec citation 00
Vieux 30/06/2011, 07h31   #7
Modérateur
 
Avatar de Bisûnûrs
 
Josselin
Développeur Web
Inscription : janvier 2004
Messages : 9 050
Détails du profil
Informations personnelles :
Nom : Josselin
Âge : 29
Localisation : France, Rhône (Rhône Alpes)

Informations professionnelles :
Activité : Développeur Web

Informations forums :
Inscription : janvier 2004
Messages : 9 050
Points : 12 181
Points : 12 181
Citation:
Envoyé par koKoTis Voir le message
Bonjour, est-il possible de centrer un texte verticalement dans un div ?
Pourtant mes yeux ne me jouent pas des tours.

Je te laisse chercher comme un grand les valeurs que peut prendre la propriété vertical-align et à quoi elles correspondent vraiment.
Bisûnûrs est déconnecté   Envoyer un message privé Réponse avec citation 00
Vieux 30/06/2011, 07h35   #8
Débutant
 
Avatar de koKoTis
 
Inscription : août 2006
Messages : 3 196
Détails du profil
Informations forums :
Inscription : août 2006
Messages : 3 196
Points : 1 673
Points : 1 673
Quand je disait centrer je voulais dire aligner pardon

J'ai essayer bottom tout cour ca ne fonctionne pas
koKoTis est déconnecté   Envoyer un message privé Réponse avec citation 00
Vieux 30/06/2011, 08h14   #9
Modérateur
 
Avatar de Bisûnûrs
 
Josselin
Développeur Web
Inscription : janvier 2004
Messages : 9 050
Détails du profil
Informations personnelles :
Nom : Josselin
Âge : 29
Localisation : France, Rhône (Rhône Alpes)

Informations professionnelles :
Activité : Développeur Web

Informations forums :
Inscription : janvier 2004
Messages : 9 050
Points : 12 181
Points : 12 181
Citation:
Envoyé par 12monkeys Voir le message
il suffit de rajouter display:table-cell;
Bisûnûrs est déconnecté   Envoyer un message privé Réponse avec citation 00
Vieux 30/06/2011, 08h17   #10
Débutant
 
Avatar de koKoTis
 
Inscription : août 2006
Messages : 3 196
Détails du profil
Informations forums :
Inscription : août 2006
Messages : 3 196
Points : 1 673
Points : 1 673
J'ai donc ceci:

Code :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.bloc_menu_bouts {
   float: left;
   height:107px;
   width:200px;
   cursor:pointer; 
   background-image:url(imgs/onglet_1a.jpg); 
   layer-background-image:url(imgs/onglet_1a.jpg);
}
 
.h1 {
   margin:0;
   line-height:1.1; /* rétablir le line-height */
   display:table-cell;
   vertical-align:bottom;
}

Mais le texte reste au milieux
koKoTis est déconnecté   Envoyer un message privé Réponse avec citation 00
Vieux 30/06/2011, 08h21   #11
Modérateur
 
Avatar de Bisûnûrs
 
Josselin
Développeur Web
Inscription : janvier 2004
Messages : 9 050
Détails du profil
Informations personnelles :
Nom : Josselin
Âge : 29
Localisation : France, Rhône (Rhône Alpes)

Informations professionnelles :
Activité : Développeur Web

Informations forums :
Inscription : janvier 2004
Messages : 9 050
Points : 12 181
Points : 12 181
Code html :
<div>Du texte</div>

Code :
1
2
3
4
5
div {
   height : 100px;
   display : table-cell;
   vertical-align : bottom;
}
Ca fonctionne, je te laisse l'arranger à ta sauce.
Bisûnûrs est déconnecté   Envoyer un message privé Réponse avec citation 00
Vieux 30/06/2011, 08h24   #12
Débutant
 
Avatar de koKoTis
 
Inscription : août 2006
Messages : 3 196
Détails du profil
Informations forums :
Inscription : août 2006
Messages : 3 196
Points : 1 673
Points : 1 673
Merci encore

Je vien de voir une erreur que j'vai fait.

J'avais mis:

Code :
1
2
3
4
5
6
.h1 {
   height : 100px;
   display : table-cell;
   vertical-align : bottom;
 
}
Au lieu de:

Code :
1
2
3
4
5
6
h1 {
   height : 100px;
   display : table-cell;
   vertical-align : bottom;
 
}
Un poins en trop devant h1.
koKoTis est déconnecté   Envoyer un message privé Réponse avec citation 00
Réponse Proposer ce sujet en actualité Cette discussion est résolue.
Outils de la discussion



Fuseau horaire GMT +2. Il est actuellement 03h37.


 
 
 
 
Partenaires

Hébergement Web