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 1016px宽（这是你网站的宽度）。它还将其集中在您的网站中（保证金：0自动;）