0

「theform」の中にdiv「top」があり、これを中央に配置し、上部マージンに2emを使用します。中央に配置されますが、トップマージンの 2em ではありません。そして -webkit-box-align: center; 「メインフォト」を中央に配置する必要があるため、どちらも機能していません。

何か案は？もしかしてマージン崩壊？もしそうなら、私はそれに対する修正を見つけることができませんでした。

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 に答える