中心对齐图像列表

Question

一些CSS专家可以帮助我获得这种布局。

我在这里有什么

<div class="movieList">  
<div class="image" selected = true>  
 <img class="poster" src="image1" selected = true/>  
</div> 
 <div class="image">   
<img class="poster" src="image1"/>  
</div>  
<div class="image"> 
  <img class="poster" src="image2"/>
 </div> 
 .
 .

</div>

由于

Answer 1

开始于：

.cover {
  float:left;
  margin-left:-50px;
}

从那里开始。

示例：http://jsfiddle.net/steve/T2qHR/（居中，纯CSS，放大效果）

Answer 2

请参阅此http://www.jsfiddle.net/hKQcX/4/

$(function(){

    $('.movie').live('mouseover', function(){

    var $movie = $('.movie'); 
    $movie.css('z-index', 0);
    $movie.css('opacity', .50);
    $movie.css('width', '100px');
    $movie.css('height', '150px');
    $movie.css('margin-top', '0');

    var $this = $(this);
    $this.css('z-index', 100);
    $this.css('opacity', 1.00);
    $this.css('width', '120px');
    $this.css('height', '180px');
    $this.css('margin-top', '-15px');

    });

    var i=0;
    for (i;i<10;i++){
    if(i%2==0)
      $('#container').append('<div class=\"movie red \"></div>');
    else
      $('#container').append('<div class=\"movie green\"></div>')
     }
});

在你的CSS中

#container{
  margin-left: 50px;
  margin-top: 100px;
}

.movie{
  position: relative;
  float:left;
  width:100px;
  height: 150px;
  margin-left:-50px;
}

.red{
  background-color:red;
  opacity: .5;
}

.green{
  background-color:green;
  opacity: .5;
}

Answer 3

如果你想显示它们而不是史蒂夫有正确的答案，如果你想把那个容器对准中心那么：

.cover {
    margin: 0 auto;
    width:600px;
}