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

Question

I currently have a header div and inside of it, I have header-top and header-bottom . 我目前有一个header div，在它的里面，我有header-top和header-bottom 。 I am trying to place my logo on the top-header and align it vertically and horizontally. 我正在尝试将徽标放在top-header并使其在垂直和水平方向上对齐。 The logo aligns horizontally but vertically, it pushes aligns according to the body it seems and it brings the header down 20px. 标志水平对齐，但垂直，它根据推对齐body似乎和它带来的头部向下20像素。 Here is my code. 这是我的代码。

HTML: 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: 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);
}

This is what I get 这就是我得到的

Answer 1

Suggestion. 建议。 Could be wrong. 可能是错误的。

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

If wrong, try aligning the div as so. 如果错误，请尝试将div对齐。

Edit: If all else fails, edit image, and offset it to desired alignment 编辑：如果其他所有方法均失败，则编辑图像并将其偏移到所需的对齐方式

在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