标头包装器重新调整 CSS 的大小

Question

我等了7天才问这个问题，因为我不能问更多问题，我想在人们重新调整页面大小时将包装器保持在中间

header {
    background-image: url("http://lorempixel.com/400/200");
    background-size: 100% 100%;
    height: 100px;
}
#home {
position:absolute;
top:10px;
left:400px;
}

<header>
	<img id="home" src="https://cdn2.iconfinder.com/data/icons/snipicons/5000/home-128.png" alt="home" style="width:75px;height:67px">
</header>

嘟

Answer 1

您可以简单地将text-align: center添加到父元素中。img将尊重这一点，因为它默认inline。

更新的示例

header {
    background-image: url("http://lorempixel.com/400/200");
    background-size: 100% 100%;
    height: 100px;
    text-align: center;
}

有关替代方法，请参阅此答案。

Answer 2

这应该可以做到，如果你所需要的只是一直保持图标居中，你真的不需要绝对定位它。

header {
    background-image: url("http://lorempixel.com/400/200");
    background-size: 100% 100%;
    height: 100px;
    text-align: center;
}
#home {
   margin-top: 10px;
}

Answer 3

试试这个，

#home {
position:absolute;
top:10px;
left:48%;
}