Question

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

因此，徽标的父div应该不响应，而徽标应保持响应。我不能使用任何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>

Answer 2

只需将library(dplyr) schedule %>% mutate(start = start[1] + lag(cumsum(duration), default = 0) , end = start + duration) # # A tibble: 3 x 4 # start duration flag_StartActual end # <date> <dbl> <lgl> <date> # 1 2018-07-11 10.0 T 2018-07-21 # 2 2018-07-21 23.0 F 2018-08-13 # 3 2018-08-13 9.00 F 2018-08-22与flex一起使用，即可将徽标对准标题的中心。

justify-content: center

header {
  display: flex;
  justify-content: center;
  min-width:1200px;
  background:red;
  height:80px;
}

img {
    width: 50px;
    height:50px;
}

或者如果您希望徽标始终位于屏幕中央，则可以尝试

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

header {
  display: flex;
  justify-content: center;
  min-width: 1200px;
  background: red;
  height: 80px;
}

img {
  width: 50px;
  height: 50px;
}

.image {
  position: 'fixed';
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

最小宽度无响应背景中的中心徽标

2 个答案: