Les marges ne fonctionnent pas?

J'ai un div, "top" à l'intérieur de "theform", que je veux être centré et 2em pour la marge supérieure. Il est centré mais n'est pas 2em pour la marge supérieure. Et -webkit-box-align: center; ne fonctionne pas non plus parce que j'ai besoin de "mainphoto" centrée.Les marges ne fonctionnent pas?

Des idées? Peut-être que la marge s'effondre? Je n'ai pas trouvé de solution pour ça si c'est le cas.

http://jsfiddle.net/D2BC4/1/

HTML

<div id="wrapper"> 
     <body> 
     <?php 
     ?> 
     <div id="theform"> 
      <form> 
       <div id="top"> 
        <div id="mainphoto"> 

        </div> 
        <div id="title"> 

        </div> 
       </div> 
      </form> 
     </div> 
     </body> 
    </div>

CSS

*{ 
    font-size:100%; 
    margin: 0em; 
    padding: 0em; 
} 

body{ 
    width: 100%; 
} 

#mainphoto{ 
    display:-webkit-box; 
    width:22em; 
    height:17em; 
    border:1px solid red; 
} 


#theform{ 
    display:-webkit-box; 
    -webkit-box-orient: vertical; 
    width: 55em; 
    overflow:auto; 
    border:1px black solid; 
} 

#title{ 
    display:-webkit-box; 
} 

#top{ 
    -webkit-box-orient: horizontal; 
    -webkit-box-align: center; 
    margin: 2em auto; 
    width: 50em; 
    height:20em; 
    overflow:auto; 
    border:2px red solid; 
} 



#wrapper{ 
    display:-webkit-box; 
    -webkit-box-orient: horizontal; 
    -webkit-border-radius:0.9em; 
    box-shadow: 3px 10px 5px #888888; 
    margin: 3em auto; 
    width: 80em; 
    height:52em; 
}

Source

2013-04-01 user2127833

Assurez-vous de ne jamais utiliser les propriétés ēno 2009 sans fournir également des propriétés de la spécification standard: http://www.w3.org/TR/css3-flexbox/ . Vous ne savez jamais quand les navigateurs abandonneront la prise en charge des propriétés de cet ancien brouillon. – cimmanon

@cimmanon merci mais connaissez-vous la réponse à mon problème aussi? – user2127833

Ce que vous cherchez à réaliser n'est pas clair. Centre quel chemin? Horizontal? Verticale? Vous avez beaucoup d'éléments qui ont été transformés en * conteneurs flexibles * sans raison. Vous utilisez des propriétés qui ne fonctionnent que sur des conteneurs flex sur des éléments qui ne sont pas des conteneurs flexibles. Vous avez un 'div' contenant votre balise' body', qui est un code HTML invalide. – cimmanon

ajouter à votre marge #mainphoto pour le rendre centrer

#mainphoto{ 
    display:-webkit-box; 
    width:22em; 
    height:17em; 
    margin:2em auto 0 auto; 
}

travail demo

espoir cette aide

Source

2013-04-01 01:38:16 jhunlio

Je le veux aligné avec box-align. Et pas centré. Je veux que le div "top" soit centré et ait une marge supérieure de 2em – user2127833

votre principal '# top' devrait être' center', '# mainphoto' devrait être dans le coin gauche de' # top' pouvez-vous me montrer l'image, de ce que vous voulez accomplir si ça va avec vous. – jhunlio

Les marges ne fonctionnent pas?

Répondre

Questions connexes