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

  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

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

n°246975
fifiz
Posté le 17-11-2002 à 11:33:02  profilanswer
 

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
mood
Publicité
Posté le 17-11-2002 à 11:33:02  profilanswer
 

n°246996
gm_superst​ar
Appelez-moi Super
Posté le 17-11-2002 à 14:07:14  profilanswer
 

Ç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
n°247038
fifiz
Posté le 17-11-2002 à 15:12:49  profilanswer
 

non, variable

n°247050
gm_superst​ar
Appelez-moi Super
Posté le 17-11-2002 à 15:35:06  profilanswer
 

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
n°247148
fifiz
Posté le 17-11-2002 à 19:15:51  profilanswer
 

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

n°247154
fifiz
Posté le 17-11-2002 à 19:36:12  profilanswer
 

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
n°247202
gm_superst​ar
Appelez-moi Super
Posté le 17-11-2002 à 21:24:24  profilanswer
 

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
n°247237
Hermes le ​Messager
Breton Quiétiste
Posté le 17-11-2002 à 21:59:27  profilanswer
 

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:  
 

n°247259
fifiz
Posté le 17-11-2002 à 22:28:04  profilanswer
 

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
n°247299
Hermes le ​Messager
Breton Quiétiste
Posté le 17-11-2002 à 23:22:12  profilanswer
 

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


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

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

 

Sujets relatifs
[CSS] problème de bordureA ceux qui utilisent XHTML/CSS
[CSS] Anticiper un changement de font en hover ?Centrer tout dans la page sur tous les navigateurs !!!
DIV sur plusieurs framesValidation de CSS
Quelques questions sur JS/CSS/HTML (Autres questions ...)Css Sur Balise Option
[CSS] Divers problèmes de marges et de listesQuestion de CSS
Plus de sujets relatifs à : DIV/CSS > comment centrer verticalement un div dans un autre div ?


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR