html - HTML5 CSS3 嵌套 DIV 定位

Question

/* HTML */
<header role="heading">
    <div class="logo">
        <h1><a href="/">this is the banner</a></h1>
    </div>
<header>

/* CSS */
header
{
    background-color: rgb(255, 165, 0);
    height: 160px;
    width: 100%;
}

header .logo
{
    margin: 30px auto;
    width: 980px;
}

所以，我希望 for.logo居中header，它确实......但它header从顶部拉出 30px。

我尝试过制作header相对，但这只会导致居中（30px 自动）不起作用。

任何意见，将不胜感激！

Answer 1

有时边距也会影响父元素，我推荐以下方法：保持标记不变，并在容器上使用填充而不是子元素上的边距。

/* CSS */
header
{
    background-color: rgb(255, 165, 0);
    height: 160px;
    width: 100%;
    padding:30px 0px; /* Use padding here*/
}

header .logo
{
    margin: 0px auto; /* Instead of margin here */
    width: 980px;
}

Answer 2

有点尴尬，但是我在发布问题后查看了问题并看到了答案……我曾经margin: 0 auto居中.logo并padding-top: 30px降低了它。

抱歉浪费时间！也许这会帮助别人。