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

Question

我目前有一个header div，在它的里面，我有header-top和header-bottom 。 我正在尝试将徽标放在top-header并使其在垂直和水平方向上对齐。 标志水平对齐，但垂直，它根据推对齐body似乎和它带来的头部向下20像素。 这是我的代码。

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 个解决方案

解决方案1
1 已采纳 2016-08-09 02:00:55

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

问题描述

1 个解决方案

解决方案1 1 已采纳 2016-08-09 02:00:55

解决方案1
1 已采纳 2016-08-09 02:00:55