Question

我在“theform”中有一个div，“top”，我想要居中，2em为top-margin。它集中在一起但不是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;
}

Answer 1

为#mainphoto添加保证金以使其成为中心

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

工作demo

希望这个帮助

保证金不起作用？

1 个答案: