Question

我目前有一个header div，其中包含header-top和header-bottom。我正在尝试将我的徽标放在top-header上并垂直和水平对齐。徽标水平但垂直对齐，它根据看起来body按下对齐，并将标题向下调整为20px。这是我的代码。

HTML：

<body>
    <div id="big-wrapper">
        <div id="header">
            <div id="header-top">
                <img src="img/main-logo.png" />
            </div>
            <div id="header-bottom">
            </div>
        </div>
    </div>
</body>

CSS：

#header {
    width: 100%;
    height: 160px;
    box-shadow: 0 1px 4px 1px rgba(237, 237, 237, 1);
}

#header-top {
    height: 130px;
    border-bottom: 1px solid rgba(200, 200, 200, 0.7);
    background-color: rgba(255, 255, 255, 1);
}

#header-top img {
    height: 90px;
    width: 255px;
    display: block;
    margin: 20px auto;
}

#header-bottom {
    height: 30px;
    border-bottom: 1px solid rgba(200, 200, 200, 0.7);
    background-color: rgba(255, 255, 255, 1);
}

这就是我得到的

Answer 1

建议。可能是错的。

    <div id="header-top">
        <center>
            <img src="img/main-logo.png" />
        </center>
    </div>

如果错误，请尝试将div对齐。

编辑：如果所有其他方法都失败了，请编辑图像，并将其偏移到所需的对齐

中心在div内水平和垂直对齐图像

1 个答案: