边距不起作用？

我有一个div，“theform”里面的“顶部”，我想要居中，2em顶边。它被集中，但不是2em的顶部边缘。和-webkit-box-align：center;不工作，因为我需要“mainphoto”居中。边距不起作用？

任何想法？可能边缘崩溃了？如果是的话，我找不到解决办法。

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; 
}

来源

2013-04-01 user2127833

确保您还没有从标准规范提供的属性不会使用2009年Flexbox的属性：http://www.w3.org/TR/css3-flexbox/ 。你永远不知道什么时候浏览器会放弃对旧草稿中属性的支持。 – cimmanon

@cimmanon谢谢，但你知道我的问题的答案吗？ – user2127833

你想要达到什么目前还不清楚。中心是哪个方向？水平？垂直？您有许多元素已经无缘无故地变成* flex容器*。您正在使用的属性仅适用于不是柔性容器的元素上的柔性容器。你有一个包含'body'标记的'div'，它是无效的HTML。 – cimmanon

添加保证金您#mainphoto，使其中心

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

工作demo

希望这有助于

来源

2013-04-01 01:38:16 jhunlio

我希望它与盒子对齐对齐。而不是集中。我希望div“顶部”居中，顶部边距为2em – user2127833

你主''顶部'应该是'center'，'＃mainphoto'应该在'＃top'的左上角，你可以向我展示形象，你想达到什么样的目标，只要你和你在一起。 – jhunlio

边距不起作用？

回答

相关问题