html - 全宽画廊，中间有一张图片

Question

我必须创建一个“无限”宽度的画廊，每张幻灯片都很940px宽，网站中心很简单width:940px;margin: 0 auto 0;我如何强制当前图像正好位于网站的中心？

这是我的尝试：

1

  #gallery {
    white-space: nowrap;
    text-align: center;
  }

2

  #gallery {
    width: 100%;
    text-align: left;
  }

请注意，我可以用 javascript 解决这个布局问题，我正在寻找一个 纯css 的解决方案。

谢谢。

Answer 1

这可能会有所帮助——下面的 CSS 将在中心/中间（水平和垂直）放置一个 div，而不是像 align:center 那样水平居中。

http://jsfiddle.net/fSNJR/

#centerdiv { 
position:absolute; 
top:50%; 
left:50%; 
width:940px; 
height:300px; 
margin-top:-150px; /* Half your height */
margin-left:-470px; /* Half your width */
background:#333; }