无法弄清楚如何使用边距居中图像：自动

Question

我检查了多个线程并尝试了多个选项。我试过将显示设置为块，为图像和容器设置特定宽度。我可能会错过任何其他条件吗？

HTML:

<footer>
    <div id="footercontent">
        <div id="logobox">
            <img src="images/logo.png" />   <--- THIS IS THE IMAGE IN QUESTION
        </div>
        <div id="social">

        </div>
    </div>
</footer>

CSS:

footer {
    width: 100%;
    height: 200px;
    background-color: white;
    position: relative;
    margin-top: 70px;
}
#footercontent {
    width: 70%;
    height: 100%;
    background-color: black;
    margin: auto;
}
#logobox {
    width: 30%;
    height: 100%;
    margin-right: 0;
    float: left;
}
img {
    height: 70%;
    position: absolute;
    margin: auto;
    display: block;
}
#social {
    width: 70%;
    height: 100%;
    background-color: white;
    float: left;
}

Answer 1

删除 position: absolute 并将 margin: 0 auto 应用于 img。当 position: absolute 应用于某个元素时，它会从 DOM

的正常流程中取出

img {
    height: 70%;
    margin: 0 auto;
    display: block;
}

无法弄清楚如何使用边距居中图像：自动

Can't figure out how to center image with margin: auto

html

css

margin

centering