html - Div 在屏幕尺寸变化时移动

Question

我有一个静态的 HTML 网站，除了页脚外，它运行得很好。本质上，页脚是一个图像，其中有文本重叠。当屏幕尺寸改变时，页面上的元素会随之移动以适应屏幕。除了页脚文本。我无法锻炼我做错了什么并且相当肯定这是我错过的如此简单的事情。这是正在发生的事情以及我需要它做什么的图表:

因此，文本框(出于演示目的为白色)与上方的左框/边缘对齐。即使屏幕放大和缩小，我也需要文本与那个“标记”保持一致。

但是，当我放大屏幕时，你可以看到上面的白框移动了，但是文字并没有跟着移动!

页脚的代码如下:

    <div class="orangeFooter">
        <img src="images/orange-footer.png">
        <h2><span class="orangeText">Promoting a knowledge based NHS</span</h2>
    </div>

还有 CSS:

.orangeFooter{
    margin-top:40px;
    width:100%;
    position:relative;
    height:133px;
}

h2 .orangeText{
    background:#fff;
    padding:7px;
    font-size: 40px;
}

.orangeFooter img{
    width:100%;
    height:100%;
}

.orangeFooter h2{
    position:relative;
    font-style:italic;
    left: 210px;
    bottom:80px;
    font-size: 40px;
}

Answer 1

使用这个 CSS:

.orangeFooter h2 {
  position: relative;
  font-style: italic;
  /* left: 210px; */
  bottom: 80px;
  font-size: 40px;
  display: block;
  margin: 0 auto;
  width: 1016px;
}

它使 h2 宽度为 1016 像素(这是您网站的宽度)。它还将其置于您网站的中心(边距:0 auto；)