邊距不起作用？

我有一個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

邊距不起作用？

回答

相關問題