html - 在最小宽度无响应背景中居中 Logo

Question

我必须在背景图像上设置 min-width:1200px; 以阻止它调整大小。如何使其顶部的 Logo 保持响应？它应该留在屏幕中间，不受背景不再响应的影响。

因此 Logo 的父 div 不应响应，而 Logo 应保持响应。我不能使用任何 CSS 框架，它是一个 WordPress 网站

Answer 1

如果您不能将 logo 包裹在另一个容器中，并且它的直接父级有 min-width:1200px，您可以使用 position:fixed 放在 logo 上，并将其置于页面中央。

无需您提供任何其他代码，这就是解决方案

header {
  min-width:1200px;
  background:red;
  height:80px;
}
img {
  position:fixed;
  top:15px;
  left:50%;
  transform:translateX(-50%)
}
body {
  margin:0;
}

<header>
  <img src="http://via.placeholder.com/50x50">
</header>