Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
3991 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  La fameux vertical-align

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

La fameux vertical-align

n°475964
sibelius
Vous êtes sûr ?
Posté le 02-08-2003 à 20:38:12  profilanswer
 

Je veux centrer un texte dans un bloc. Rien de compliqué apparemment.
 
Voici mon CSS :  
.conteneur {
display: table-cell;
width: 500px;
height: 400px;
background-color: yellow;
vertical-align: middle;
}
 
Et mon HTML :
<div class="conteneur">
texte centré
</div>
 
Pourquoi mon texte n'est pas centré verticalement ? Je précise qu'il n'y a que sous IE que ça ne marche pas, tout fonctionne sous Opera et Firebird.
Y'a t'il un truc que j'ai oublié ?
Y'a t'il un moyen de gruger IE ?
Comment faire pour que ça fonctionne sous IE sans tables ?
 
 
PS : Je viens de repotasser une fois de plus la FAQ à ce sujet et tout me semble correct pourtant


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
mood
Publicité
Posté le 02-08-2003 à 20:38:12  profilanswer
 

n°475995
sibelius
Vous êtes sûr ?
Posté le 02-08-2003 à 21:17:12  profilanswer
 

Pas d'acheteur... ou tout le monde en vacances ?  :sleep:


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
n°476017
gizmo
Posté le 02-08-2003 à 21:39:16  profilanswer
 

IE ne gère pas le table-cell [:spamafote]

n°476019
sibelius
Vous êtes sûr ?
Posté le 02-08-2003 à 21:42:41  profilanswer
 

gizmo a écrit :

IE ne gère pas le table-cell [:spamafote]


Sacré IE, va ! Toujours là pour mettre de l'ambiance, lui  :p  
 
Et pas moyen de le gruger, sinon ?


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
n°476051
gizmo
Posté le 02-08-2003 à 23:52:23  profilanswer
 

euh... oui, y a moyen. Tu peux jouer avec les paddings, inclure ton texte dans un span de même hauteur que le div, ...

n°476057
axey
http://www.00f.net
Posté le 02-08-2003 à 23:57:19  profilanswer
 

Avec line-height.
Ah non... ça fonctionne aussi partout... sauf sous IE...
 

n°476076
sibelius
Vous êtes sûr ?
Posté le 03-08-2003 à 00:37:57  profilanswer
 

gizmo a écrit :

euh... oui, y a moyen. Tu peux jouer avec les paddings, inclure ton texte dans un span de même hauteur que le div, ...

Euh ça, ça ne change strictement rien :  
 
<style type="text/css">
.conteneur {
display: table-cell;
width: 500px;
height: 400px;
background-color: yellow;
vertical-align: middle;
}
span {
height: 400px;
}
</style>
 
 
<body>
<div class="conteneur">
<span>texte centré</span>
</div>
 
Et avec les paddings je ne vois pas non-plus :(


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
n°476080
sibelius
Vous êtes sûr ?
Posté le 03-08-2003 à 00:47:32  profilanswer
 

Autre chose : en définissant une taille de 100% (width: 100%;
height: 100%;) à mon conteneur, l'alignement ne fonctionne plus du tout... ni sur IE (bien sûr), ni sur aucun autre navigateur.
 
Question bête : comment centrer un petit site (genre 400x300px) dans la page, horizontalement et verticalement, quel que soit le navigateur ?


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
n°476109
sibelius
Vous êtes sûr ?
Posté le 03-08-2003 à 02:19:04  profilanswer
 

J'ai finallement une solution qui fonctionne, est-ce correct ?
 
 
.conteneur {
position:absolute;
left: 50%;
top: 50%;
width: 500px;
height: 300px;
margin-top: -150px;
margin-left: -250px;
}


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
n°476175
gizmo
Posté le 03-08-2003 à 11:36:53  profilanswer
 

pour ton centrage de boite, oui, c'est correct (j'avais fait un long post la-dessus sur FG suite à une demande de shemu ;) )
 
pour le span, c'est bien sur sur lui qu'il faut appliquer le vertical-align, pas sur l'autre, sinon, ca ne change rien au problème :p


Message édité par gizmo le 03-08-2003 à 11:37:01
mood
Publicité
Posté le 03-08-2003 à 11:36:53  profilanswer
 

n°476317
sibelius
Vous êtes sûr ?
Posté le 03-08-2003 à 18:06:26  profilanswer
 

"j'avais fait un long post la-dessus sur FG suite à une demande de shemu" >> pas vu ;)
 
"pour le span, c'est bien sur sur lui qu'il faut appliquer le vertical-align, pas sur l'autre, sinon, ca ne change rien au problème :p" >> J'avais testé aussi sur le span, mais ça ne change rien :(
 
Quoi qu'il en soit, le problème semble réglé ;)


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
n°476394
gm_superst​ar
Appelez-moi Super
Posté le 03-08-2003 à 19:32:14  profilanswer
 

gizmo a écrit :

IE ne gère pas le table-cell [:spamafote]


Ah mairde :/ Faudra que je l'indique dans l'article sur vertical-align dans la FAQ...


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
n°476411
sibelius
Vous êtes sûr ?
Posté le 03-08-2003 à 19:43:11  profilanswer
 

gm_superstar a écrit :


Ah mairde :/ Faudra que je l'indique dans l'article sur vertical-align dans la FAQ...


Oui, parce que cela m'a étonné que ça ne fonctionne pas (quoique avec IE on n'est plus guère étonné), alors que je suivais la FAQ.
 
Il faudrait peut-être aussi proposer cette solution des marges négatives, si c'est correct et propre partout


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
n°476421
Flyman30
Posté le 03-08-2003 à 19:59:45  profilanswer
 

SIBELIUS a écrit :


Oui, parce que cela m'a étonné que ça ne fonctionne pas (quoique avec IE on n'est plus guère étonné), alors que je suivais la FAQ.
 
Il faudrait peut-être aussi proposer cette solution des marges négatives, si c'est correct et propre partout


 
marche pas avec netscape 4.7  :D

n°476422
kadreg
profil: Utilisateur
Posté le 03-08-2003 à 20:01:06  profilanswer
 

flyman30 a écrit :


 
marche pas avec netscape 4.7  :D  


 
On s'en fout des navigateurs d'ancienne génération. Dehors les netscape 4 et Internet explorer


---------------
brisez les rêves des gens, il en restera toujours quelque chose...  -- laissez moi troller sur discu !
n°476424
Flyman30
Posté le 03-08-2003 à 20:01:48  profilanswer
 

kadreg a écrit :


 
On s'en fout des navigateurs d'ancienne génération. Dehors les netscape 4 et Internet explorer


 
 :lol:  :lol:  :lol:  :lol:

n°476427
sibelius
Vous êtes sûr ?
Posté le 03-08-2003 à 20:04:49  profilanswer
 

flyman30 a écrit :


marche pas avec netscape 4.7  :D  


Je parlais de navigateurs, pas de dinosaures  :D


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
n°476428
gm_superst​ar
Appelez-moi Super
Posté le 03-08-2003 à 20:08:06  profilanswer
 

SIBELIUS a écrit :

Il faudrait peut-être aussi proposer cette solution des marges négatives, si c'est correct et propre partout


Cette solution des "marges négatives" est évoquée à la fin de l'article sur vertical-align : http://forum.hardware.fr/forum2.ph [...] 12#t389941
 

Citation :

-> Si on souhaite positionner du texte verticalement dans un bloc :
 - soit on connait la hauteur de l'ensemble du texte et alors on peut utiliser le positionnement absolu ou relatif (ce qui revient à positionner un bloc dans un autre bloc);


 
C'est ce que je sous-entend par "positionnement absolu" ici. Je n'ai pas détaillé la méthode car elle est expliquée ailleurs : http://forum.hardware.fr/forum2.ph [...] 10#t229960 (méthode 4)
 
Comme tu le vois cette méthode n'est valable que lorsqu'on connait à l'avance la hauteur du DIV (et donc la quantité de texte qu'il y aura dedans). Ce qui n'est malheureusement pas toujours le cas...


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  La fameux vertical-align

 

Sujets relatifs
Ecriture alignée à la vertical en HTMLHTML : Comment bloquer le scroll horizontal (et non vertical) ?
[CSS] problème de vertical-align[XHTML strict] width / height / align / color ?
Comment utiliser le Text Align "Justifier" ?[html] alignement vertical au milieu marche pas a l'aide urgentissime!
Alignement vertical des images[HTML] Peut on l'equivalent d'un <HR> mais en vertical ?
Bleme d'allignement vertical sur ma page central ! HELP 
Plus de sujets relatifs à : La fameux vertical-align

Forum MesDiscussions.Net, Version 2010.2
(c) 2000-2011 Doctissimo
Page générée en 0.072 secondes

Copyright © 1997-2025 Groupe LDLC (Signaler un contenu illicite / Données personnelles)