固定位置在固定页面的中间

Question

我的页面有一个带有固定宽度的大div，因此：

#index_body{
  width: 1010px;
  background-image: url('images/main_bg_dark.png'); 
  margin: auto;
  overflow: hidden;
  min-height: 50px;
  padding-bottom: 10px;
  border-radius: 7px;
  -moz-box-shadow: 0 5px 15px #000000;
  -webkit-box-shadow: 0 5px 15px #000000;
  box-shadow: 0 5px 15px #000000;
}

我想在页面右侧添加按钮（20x20px）（中间垂直） - 仍然在index_body旁边。

因此，按钮具有代码，例如：

#butt {
  width:20px;
  height:20px;
  background: url('images/scrollUp.png');
  position:fixed;
  top:50%;
  left:WHAT SHOULD BE HERE??
}

因为这取决于实际分辨率。我的index_body总是以中心为中心。如果我更改分辨率，我的按钮将移至左右...

Answer 1

而不是设置left或right位置，请确保按钮元素在索引元素内，然后使用边距。

margin: 0px 0px 0px 1010px;

这是您的代码的测试和工作版本-http：//lukewakeford.co.uk/testsite/blackbutton/

Answer 2

#butt {
  width:20px;
  height:20px;
  background: url('images/scrollUp.png');
  position:fixed;
  top:50%;
  right: 10%;
}

10％是一个例子，更改为看起来不错的百分比，并且应该响应屏幕分辨率。

另一方面，您为什么要在固定容器内使用固定元件？只需使其绝对并以边距向右漂浮。

Answer 3

好吧，应该像这样：

#butt {
  width:20px;
  height:20px;
  background: url('images/scrollUp.png');
  position:fixed;
  top:50%;
  margin-left: 1010px;
}