Question

这可能已被另一个主题所涵盖，但我似乎无法找到任何答案，这将有助于我的设计。

我有一个css背景图片，无论浏览器大小如何都会保持居中。使用的图像不会拉伸浏览器的整个宽度。在这种情况下，我需要使用背景图像和链接放置在css中的div，以保持它们相对于保持居中的位置，无论浏览器大小如何。

我已经涉足......

position:relative;

但是它级联了所有元素并且不允许我正在寻找的特定定位。这是我正在使用的代码。我很欣赏对我的新问题的任何见解，并期待了解这种行为如何更好。

在不同大小的浏览器上查看此代码时，如果背景图像不跨越整个宽度，则元素会移动，因为它们设置为百分比。我需要他们留在原地，但仍然以背景为中心。我不知道如何在CSS中写这个并且已经在一段时间内一直在努力。谢谢你对这个具体问题的任何指导。

body {
    background:#000 url(bg.jpg) no-repeat center 0;
}
#logo {
    margin: 0px 11%;
    padding: 0;
    position:absolute;
}

Answer 1

类似的StackOverflowers可能已经回答了您的问题：

Position=fixed but Margin=auto

margin to center with position fixed

您的原始问题不清楚，请评论这些是否对您不起作用。

Answer 2

尝试将你想要放在它旁边的元素组合在一个div~sell container~中，然后将背景设置为div。然后将div~container~位置设置为relative并将其居中。

然后使用位置绝对和左上角左上角属性与〜容器~div。

对齐其他元素

这是它的代码

 <div id="container">
     <div id="element1"></div>
     <div id="element1"></div>
 </div>

<style type="text/css">
  #container {
      background:#000 url(bg.jpg) no-repeat center 0;
      width: 800px; height: 400px
      position: relative;
      top: 50%; left: 50%;
      margin-top: -200px; margin-left: -400px }
  #element1 {
      position: absolute;
      top: -30px; left: -20px;}
  #element2 {
      position: absolute;
      top: 410px; left: 820px;}
</style>

CSS背景图像居中，div元素位置基于相对于主bg图像的百分比

2 个答案: