pourquoi div dans div ne se positionne pas bien dans

Question

<div id="progressbarr"> toujours pas enveloppé bien dans son div ancêtre quand j'utilise margin-top: 50%, et en espérant qu'il sera placé au milieu horizontalement.

HTML boîte

css

#col3wrap{ 
    height: 50px; 
    background: #DDD; 
} 

.profilepic { 
    width: 50px; 
    height: 50px; 
    background: red; 
    float: left; 
    margin: 0 10px 0 0; 
} 

#progressbarr { 
    float: left; 
    width: 300px; 
    height: 20px; 
    background: #eee; 
    margin: 50% 0 0 0; 
} 

#progressbarr > div { 
    background-color: green; 
    width: 40%; 
    height: 20px; 
} 

http://jsfiddle.net/Xdwhk/

Answer 1

Votre valeur de marge est calculée en utilisant les éléments parent largeur. Pourquoi? Bonne question. Je ne sais pas, mais est une discussion ici sur le sujet: Why are margin/padding percentages in CSS always calculated against width?

Voici votre démo avec le #col3wrap avec un ensemble de largeur: http://jsfiddle.net/Xdwhk/1/

Essayez d'ajuster la largeur pour voir comment la valeur margin-top change avec ça.

Vous devrez donc trouver une méthode différente, autre que l'utilisation de marge supérieure, pour centrer verticalement votre barre de progression.

Voici une façon, en utilisant position: relative et calc pour définir la valeur top:

CSS

#col3wrap{ 
    height: 50px; 
    background: #DDD; 
    position: relative; 
} 

.profilepic { 
    width: 50px; 
    height: 50px; 
    background: red; 
    float: left; 
    margin: 0 10px 0 0; 
} 

#progressbarr { 
    float: left; 
    width: 300px; 
    height: 20px; 
    background: #eee; 
    position: relative; 
    top: 30%; 
    top: -webkit-calc(50% - 10px); 
    top: calc(50% - 10px); 
} 

#progressbarr > div { 
    background-color: green; 
    width: 40%; 
    height: 20px; 
} 

Demo

Remarque calc ne sont pas pris en charge par tous les navigateurs pour que nous doit avoir un recul.