Centrer 2 Divs dans un autre verticalement

J'ai 2 divs que je veux centrer verticalement dans un autre div. En ce moment j'ai:Centrer 2 Divs dans un autre verticalement

http://jsfiddle.net/5vpA3/1/

Maintenant, je comprends ce qui se passe ici, mais je veux la div gauche à aligné verticalement dans le conteneur et le droit div même. Mais ils s'alignent verticalement comme une paire et non individuellement. J'ai essayé différentes choses mais je n'arrive pas à le faire fonctionner.

Source

2011-04-14 anothershrubery

Sont-ils à hauteur fixe ou hauteur variable? –

Ils sont tous réellement hauteur variable. Donc, en gros, le conteneur div aura la même hauteur que le plus grand div interne et le div plus petit devrait être centré verticalement. Si cela est nécessaire, les divs peuvent être fixés en hauteur, mais nous ne voulons pas vraiment définir margin-top, etc. – anothershrubery

Je suppose de votre utilisation de 'display: table-cell' que vous ne vous souciez pas de supporter IE7 ? – thirtydot

Live Demo

Retirez float: left de #left et #right.

Au lieu de cela, utilisez display: inline-block:

#left, #right { 
    display: inline-block; 
    vertical-align: middle; 
}

En raison de l'utilisation display: inline-block, vous devez traiter the whitespace issue. J'ai choisi de supprimer l'espace dans le HTML entre </div> et <div id="right">. See here pour ce qui se passe si vous ne le faites pas. Suppression des espaces est vraiment la solution la plus simple, mais there are other ways.

Source

2011-04-14 10:34:22 thirtydot

J'ai choisi d'expliquer le problème des espaces blancs 'inline-block' de manière si approfondie en fonction de votre [question précédente] (http://stackoverflow.com/questions/5647365/images-have-gap-between-them). – thirtydot

Bravo pour l'explication. J'ai essayé cette implémentation dans la page SharePoint réelle et cela ne semble pas fonctionner, bien que je puisse voir ce qu'il devrait faire de votre violon. C'est comme si les divs se comportaient comme des blocs plutôt que comme des blocs en ligne. Voir http://jsfiddle.net/5vpA3/24/ à quoi il ressemble sur ma page. Les outils de développement IE le montrent comme ayant affichage: inline-block, donc je ne vois pas le problème. – anothershrubery

Lorsque vous appuyez sur F12 et affichez les outils de développement, quel "Mode document" est utilisé? – thirtydot

Comme ça?

Démo: http://jsfiddle.net/5vpA3/25/

#container 
{ 
    background-color: #FFFF00; 
} 
#left 
{ 
    height: 150px; 
    color: #FFFFFF; 
    background-color: #0000FF; 
    width: 100px; 
    margin-left: auto; 
    margin-right: auto; 
    position: relative; 
    left: 0px; 
    top: 0px; 
} 
#right 
{ 
    height: 80px; 
    color: #FFFFFF; 
    background-color: #FF0000; 
    width: 100px; 
    margin-left: auto; 
    margin-right: auto; 
    position: relative; 
    left: 0px; 
    top: 0px; 
}

Source

2011-04-14 12:23:02 wdm

oups j'ai fait mon horizon, il faut tôt la caféine: P – wdm

Centrer 2 Divs dans un autre verticalement

Répondre

Questions connexes