Div移动屏幕尺寸变化

I have a static HTML website that works perfectly, apart from the footer. Essentially, the footer is an image in which has text overlap. When the screen size is changed, the elements on the page move with it to fit the screen. Except for the footer text. I cannot workout what i am doing wrong and fairly positive that this is something so simple i've missed. Here is a diagram of what is happening and what i need it to do:

除了页脚之外,我还有一个静态的HTML网站。本质上,页脚是一个文本重叠的图像。更改屏幕尺寸后,页面上的元素随之移动以适合屏幕。除了页脚文本。我无法锻炼我做错了什么,相当积极的是,这是我错过的那么简单。这是一个正在发生的事情以及我需要它做什么的图表:

So, the text box (in white for demo purposes), is aligned with the left box/edge above. Even when the screen enlarges and shrinks, i need the text to remain in line with that 'marker'.

因此,文本框(白色用于演示目的)与上面的左框/边对齐。即使屏幕放大和缩小,我也需要文本与'标记'保持一致。

However, when i enlarge the screen, you can see that the white box above moves, yet the text does not go with it!

但是,当我放大屏幕时,您可以看到上面的白框移动,但文字不适合它!

The code for the footer is as follows:

页脚的代码如下:

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

And the CSS:

而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;
}

1 个解决方案

#1

Use this CSS:

使用这个CSS:

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

It makes the h2 1016px wide (which is the width of your site). it also centers it in your site (with the margin: 0 auto;)

它使h2 1016px宽(这是你网站的宽度)。它还将其集中在您的网站中(保证金:0自动;)