0

我在“theform”中有一个 div，“top”，我想居中，2em 作为上边距。它居中，但上边距不是 2em。和 -webkit-box-align: center; 也不起作用，因为我需要以“mainphoto”为中心。

有任何想法吗？保证金可能崩盘？如果是的话，我找不到解决办法。

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

1 回答 1

1

为您添加边距以#mainphoto使其居中

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

工作演示

希望这有帮助

于 2013-04-01T01:38:16.890 回答