DIV/CSS > comment centrer verticalement un div dans un autre div ?

DIV/CSS > comment centrer verticalement un div dans un autre div ? - HTML/CSS - Programmation

Marsh Posté le 17-11-2002 à 11:33:02    

Bonjour,
 
Je suis en train de passer tout mon site en CSS et de virer les tableaux utilisés pour la mide en page pour les remplacer par des div ...
 
Mais il y a un petit truc qui m'embete ex: J'ai un premier DIV dont la taille est définie et à l'intérieur de celui-ci j'ai un second DIV que je voudrais centrer verticalement et horizontalement par rapport au premier.
 
J'ai essayé vertical-align: middle mais ça à pas l'air de marcher pour les div. rassurez moi ces possible de faire ça ?
 
Une idée ?


Message édité par fifiz le 17-11-2002 à 11:34:48
Reply

Marsh Posté le 17-11-2002 à 11:33:02   

Reply

Marsh Posté le 17-11-2002 à 14:07:14    

Ça dépend... la hauteur de ton DIV intérieur est connue ?


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

Marsh Posté le 17-11-2002 à 15:12:49    

non, variable

Reply

Marsh Posté le 17-11-2002 à 15:35:06    

Donne à ton DIV conteneur la propriété :  
 
display: table-cell;
 
A ce moment là vertical-align: middle; devrait marcher. Par contre tu devras spécifier une largeur pour ton DIV conteneur.
 
 
Bon j'avoue que c'est un peu du bricolage. J'aime bien les CSS mais là je trouve qu'il y a une lacune :/


Message édité par gm_superstar le 17-11-2002 à 15:35:31

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

Marsh Posté le 17-11-2002 à 19:15:51    

Merci de l'info, je teste ça ...
 
En effet, c'est assez étonnant qu'il n'y ai pas moyen de centrer verticalement ...

Reply

Marsh Posté le 17-11-2002 à 19:36:12    

marche po ...
 
quand tu parle de largeur tu pensais probablement hauteur non ?
 
de toute façon le width et le height son déclarés respectivement en % et en px.
 
le style du conteneur :
 
.home
 {position:  relative
 ;width:   90%
 ;height:  454px}
 ;display:  table-cell
 ;vertical-align: middle}


Message édité par fifiz le 17-11-2002 à 19:37:14
Reply

Marsh Posté le 17-11-2002 à 21:24:24    

fifiz a écrit a écrit :

marche po ...



Effectivement, ça ne marche pas avec IE... Avec Mozilla pas de problème.

fifiz a écrit a écrit :

quand tu parle de largeur tu pensais probablement hauteur non ?



Non je parlais bien de la largeur. Car avec Mozilla lorsqu'on donne à un bloc la propriété display: table-celle la largeur du bloc fait exactement celle de son contenu (alors que par défaut un DIV prend la largeur de son conteneur).

fifiz a écrit a écrit :

de toute façon le width et le height son déclarés respectivement en % et en px.
 
le style du conteneur :
 
.home
 {position:  relative
 ;width:   90%
 ;height:  454px}
 ;display:  table-cell
 ;vertical-align: middle}



Bon j'ai retourné le problème en long et en large et j'en arrive à la conlusion qui n'est pas possible de centrer verticalement un bloc dont la hauteur n'est pas déclarée explicitement (par une propriété height).
 
Donc 2 solutions s'offrent à toi :
 - Utiliser les tableaux
 - Déclarer la heuteur de ton deuxième DIV
 
Question subsidiaire : est-ce qu'il y a moyen que tu te passes du deuxième DIV ? Car la méthode que j'ai donnée plus haut fonctionne avec IE pour centrer verticalement du texte (et non pas un bloc)
 
 
Je le redis il y a clairement un manque à ce niveau là avec les CSS et d'ailleurs le problème a été (vivement) débattu il y a quelques temps sur la liste du W3C : http://lists.w3.org/Archives/Publi [...] /0107.html


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

Marsh Posté le 17-11-2002 à 21:59:27    

ouaip, c'est hélas un cas de figure "classique" où l'usage d'un tableau est obligatoire si on cherche le crossbrowsing.
 
Mais rien n'empêche de se servir des CSS pour les tailles de cellules et du tableau quand même  ;) Faut pas revenir en arrière pour autant.  
 
Au fait salut GM  :hello:  
 

Reply

Marsh Posté le 17-11-2002 à 22:28:04    

je retourne le problème dans tous les sens mais j'avance pas ...
 
Le problème est que je suis susceptible d'avoir des choses de nature tres différente dans mon second div table texte et img
parfois (dans un slide par exemple) la taille du contenu est variable.
 
L'idée d'encapsuler le second div dans un table parait bonne mais si le contenu est un tableau ça me centre le contenu du second tableau en meme temps (alors que selon moi ça ne devrait pas) IE6 à l'air de gerer les héritages comme un tdc... j'ai attribuer un style par défaut à mes tableaux et utiliser cette méthode m'oblige à revoir complettement la logique de ma feuille de style.
 
Merci pour tout je vais essayer de me dépatouiller avec ça.


Message édité par fifiz le 17-11-2002 à 22:29:25
Reply

Marsh Posté le 17-11-2002 à 23:22:12    

non, dans les td du deuxième tableau :
 
vertical-align: top
 
;)

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed