在 CSS 中将图像或文本水平固定在页面上

Question

嗨，在我的网页上，我想制作一个图像和一些文本水平固定，这样当浏览器改变大小时它会稍微移动直到停止并保持静止，而不是当前浏览器改变我在左边的图像时推动所有右边的路，我怎么让它保持静止

谢谢你的帮助

@charset "UTF-8";
/* CSS Document */
html,body {
background-image:url(../img/background.png);
background-size:cover;
}
@font-face{
font-family:helvlight;
src:url(../img/fonts/webfontkit-20140127-181820/aliquam-webfont.ttf);
}
@font-face {
font-family:helvitalic;
src:url(../img/fonts/webfontkit-20140127-183102/aliquamulti-webfont.ttf);
}
#bar {  
margin-top:55px;
min-width:1000px center;
max-width:1920px;
height: 30px;
background: #2E2E2E;
border: 3.2px groove #FFD700;
min-width:1000px;
}
#logo { 
position:absolute;
background-image:url(../img/LOGO1.png);
background-size:150px;
width:150px;
height:150px;
margin:0 auto;
z-index:1;
top:0px;
margin: 0 auto;
left:0px;
right:0px;
}
#middle
{
height:10000px;
}

#social  {
top:18px;
left:200px;
height:32px;
width:500px;
position:absolute;
z-index:5;
}

.facebook {
background-image:url(../img/64_x_64px/facebook_dark.png);
height:32px;
width:32px;
background-size:32px;
display:inline-block;
}
.facebook:hover {
background-image:url(../img/64_x_64px/facebook_active.png);
}
.twitter {
background-image:url(../img/64_x_64px/twitter_dark.png);
height:32px;
width:32px;
background-size:32px;
display:inline-block;
}
.twitter:hover {
background-image:url(../img/64_x_64px/twitter_active.png);
}
.in {
background-image:url(../img/64_x_64px/in_dark.png);
height:32px;
width:32px;
background-size:32px;
display:inline-block;
}
.in:hover {
background-image:url(../img/64_x_64px/in_active.png);
}
.youtube {
background-image:url(../img/64_x_64px/youtube_dark.png);
height:32px;
width:32px;
background-size:32px;
display:inline-block;
}
.youtube:hover {
background-image:url(../img/64_x_64px/youtube_active.png);
}
.google {
background-image:url(../img/64_x_64px/google_dark.png);
height:32px;
width:32px;
background-size:32px;
display:inline-block;
}
.google:hover {
background-image:url(../img/64_x_64px/google_active.png);
}
.buzz {
background-image:url(../img/64_x_64px/buzz_yahoo_dark.png);
height:32px;
width:32px;
background-size:32px;
display:inline-block;
}
.buzz:hover {
background-image:url(../img/64_x_64px/buzz_yahoo_active.png);
}

#macbook {
background-image: url(../img/Untitled-2.png);
background-size: 650px;
width: 650px;
height: 460px;
position: absolute;
z-index: 3;
top: 18px;
left:2.5%;
}

#middleright {
font-family: helvlight;
font-size: 70px;
color: #000;
position:absolute;
left: 55%;
top: 130px;
width: 412px;
height: 164px;
z-index: 6;
min-width:40%
}
#middlerighttwo {
font-family: helvitalic;
font-size: 25px;
color: #000;
position: absolute;
left: 101.3%;
top: 200px;
width: 412px;
height: 164px;
z-index: 7;
}
#middlerightthree {
font-family: helvitalic;
font-size: 25px;
color: #000;
position: absolute;
left: 101.3%;
top: 300px;
width: 412px;
height: 164px;
z-index: 7;
}
#register {
background-image:url(../img/register-now-button-gold.png);
height:30px;
width:120px;
background-size:cover;
position:absolute;
z-index:8;
top:300px;
left:142%;
}
#register:hover {
box-shadow: 5px 5px 5px gold;
}

#home {
font-family:helvlight;
position:absolute;
top:47px;
font-size:14px;
color:#FFF;
left:10%;
}
#history {
font-family:helvlight;
position:absolute;
top:47px;
font-size:14px;
color:#FFF;
left:40%;
}
#society {
font-family:helvlight;
position:absolute;
top:47px;
font-size:14px;
color:#FFF;
left:68%;
}
#map {
font-family:helvlight;
position:absolute;
top:47px;
font-size:14px;
color:#FFF;
left:110%;
}
#gallery {
font-family:helvlight;
position:absolute;
top:47px;
font-size:14px;
color:#FFF;
left:137%;
}
#contactbutt {
font-family:helvlight;
position:absolute;
top:47px;
font-size:14px;
color:#FFF;
left:165%;
width:100pz;

}
#contactbutt:hover{
color:gold;
}
#home:hover{
color:gold;
}
#history:hover{
color:gold;
}
#map:hover{
color:gold;
}
#society:hover{
color:gold;
}
#gallery:hover{
color:gold;
}

Answer 1

我认为你需要的是margin: 0 10%; 或margin: 0 auto;：

CSS：

.titanfall {
    background-image: url('http://cdn3-www.craveonline.com/assets/uploads/2013/06/titanfall.jpg');
    width: 658px;
    height: 300px;
    position: relative;
    margin: 0 10%;
    text-align: center;
}

HTML：

<div class="titanfall">
    <h1>Titanfall</h1>
</div>

Play on jsFiddle.

---

根据 OP 的问题修改进行编辑。

所以，你想修复#middleright，对吧？好的，如果没有预览或更好的场景知识，我很难定位自己的问题。顺便说一下，让我解释一下关于你的 div (?) 的一些技术问题：

1. 您没有居中，因为您的 div 位于某物左侧的 55%。 结论是：您将 div 定位在 55% 的左侧，其中包含一定宽度的包装器，可能是窗口大小或另一个宽度较大的 div。

   李>

2. 您需要以适合其包装层的正确百分比的方式来塑造您的 div。我敢打赌：删除你的left: 55%并添加margin: 0 10%;。