在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