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

所以，我希望.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置于中心位置。

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

HTML5 CSS3嵌套DIV定位

2 个答案: