html - margin 不起作用?

标签 html css margin

我有一个 div,“theform”里面的“top”,我希望它居中,2em 用于上边距。它居中但不是 2em 的顶部边距。和 -webkit-box-align: 居中;也不起作用,因为我需要以“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;
}

最佳答案

为你的#mainphoto添加边距使其居中

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

工作 demo

希望对你有帮助

关于html - margin 不起作用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15736499/

相关文章:

html - 当我尝试验证文件时,CSS 格式设置出错

matplotlib - Matplotlib 中带有边缘 KDE 图和多个类别的散点图

css - list-style-none + background-image = margin 不起作用?

css - 超出自身边距的 div 标签

jquery - HTML 范围输入中的样式化步骤

c# - 资源管理器 7 上的大表性能不佳

javascript - 使用 JavaScript 访问 <object> 数据

ajax - CSS3 - 几秒钟后显示一个元素

css - laravel mix - 没有使用选项 processCssUrls :false 缩小 css

css - margin 崩溃和清除