I have a list of images which some of them have larger width that I prefer so I crop them ,I set the \[code\]overflow:hidden\[/code\] in order to hide the unnecessary part and avoid scaling.I want to center those images but nothing has worked for me.I know this is popular question but none of the answers helped me.I guess I make a mistake.Could anyone more experienced than me help?Some transition effect has been added also.\[code\] <div id="second" class="single"> <ul> <li><a href="http://stackoverflow.com/questions/12761582/images/album/7.jpg" rel="lightbox[photos]"> <img src="http://stackoverflow.com/questions/12761582/images/album/7.jpg" alt=""/></a></li> <li><a href="http://stackoverflow.com/questions/12761582/images/album/8.jpg" rel="lightbox[photos]"> <img src="http://stackoverflow.com/questions/12761582/images/album/8.jpg" alt=""/></a></li> <li><a href="http://stackoverflow.com/questions/12761582/images/album/9.jpg" rel="lightbox[photos]"> <img src="http://stackoverflow.com/questions/12761582/images/album/9.jpg" alt=""/></a></li> <li><a href="http://stackoverflow.com/questions/12761582/images/album/10.jpg" rel="lightbox[photos]"><img src="http://stackoverflow.com/questions/12761582/images/album/10.jpg" alt=""/></a></li> <li><a href="http://stackoverflow.com/questions/12761582/images/album/11.jpg" rel="lightbox[photos]"><img src="http://stackoverflow.com/questions/12761582/images/album/11.jpg" alt=""/></a></li> <li><a href="http://stackoverflow.com/questions/12761582/images/album/12.jpg" rel="lightbox[photos]"><img src="http://stackoverflow.com/questions/12761582/images/album/12.jpg" alt=""/></a></li> </ul> </div> \[/code\]The css code \[code\].single ul { list-style-type: none;}.single li { padding: 0px; width: 160px; height: 240px; margin: 10px; overflow: hidden; float: left; -webkit-transition: box-shadow 0.5s ease; -moz-transition: box-shadow 0.5s ease; -o-transition: box-shadow 0.5s ease; -ms-transition: box-shadow 0.5s ease; transition: box-shadow 0.5s ease;}.single img { height: 240px;}.single li:hover { -webkit-box-shadow: 0px 0px 7px rgba(255,255,255,0.9); box-shadow: 0px 0px 7px rgba(255,255,255,0.9);}\[/code\]UPDATE 1The list of the images is below.The pictures which are cyrcled have larger width compared to the others.They are croped.Those pictures I want to center,to be able to see the middle of the pictures not the left side.
UPDATE 2The thumbnails must have 160px width and 240px height regardless what the actual size of the pictures are.Some photos fit exactly after resizing them. Others because the width is larger than the height doesn't fit properly.That's why I crop them,they must be centered in order to make sence. To be able to see a face and not the shoulder of the person.The pictures are added dynammically in my webpage.