CODEWITHSUNDEEP
jqueryhtmlcsscenter
giannis christofakis
giannis christofakis

Reputation: 8321

Align an image in the center

I have a list of images which some of them have larger width that I prefer so I crop them ,I set the overflow:hidden 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.

 <div id="second" class="single">
     <ul>
         <li><a href="images/album/7.jpg" rel="lightbox[photos]"> <img src="images/album/7.jpg" alt=""/></a></li>
         <li><a href="images/album/8.jpg" rel="lightbox[photos]"> <img src="images/album/8.jpg" alt=""/></a></li>
         <li><a href="images/album/9.jpg" rel="lightbox[photos]"> <img src="images/album/9.jpg" alt=""/></a></li>
         <li><a href="images/album/10.jpg" rel="lightbox[photos]"><img src="images/album/10.jpg" alt=""/></a></li>
         <li><a href="images/album/11.jpg" rel="lightbox[photos]"><img src="images/album/11.jpg" alt=""/></a></li>
         <li><a href="images/album/12.jpg" rel="lightbox[photos]"><img src="images/album/12.jpg" alt=""/></a></li>
     </ul>
  </div>

The css 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);
}

UPDATE 1

The 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.

Photos

UPDATE 2

The 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.

UPDATE 3

960x640

960x460

640x960

640x960

Upvotes: 1

Views: 268

Answers (2)

giannis christofakis
giannis christofakis

Reputation: 8321

Combining the answer of @GionaF and the below script I had the desirable outcome.

   $(document).ready(function() {
     $(".single img").load(function() {
        if($(this).width() > 160) {
                $(this).addClass('centered');
            }
        });
    });

enter image description here

Upvotes: 0

Giona
Giona

Reputation: 21114

It's really hard without seeing the images, but generally speaking what you can do is:

1) Add a class to the images that need to be centered, with lots of creativity we'll call it "centered"

<div id="second" class="single">
<ul>
<li><a href="images/album/7.jpg" rel="lightbox[photos]"> <img src="images/album/7.jpg" alt=""/></a></li>
<li><a href="images/album/8.jpg" rel="lightbox[photos]"> <img class="centered" src="images/album/8.jpg" alt=""/></a></li>
<li><a href="images/album/9.jpg" rel="lightbox[photos]"> <img src="images/album/9.jpg" alt=""/></a></li>
<li><a href="images/album/10.jpg" rel="lightbox[photos]"><img src="images/album/10.jpg" alt=""/></a></li>
<li><a href="images/album/11.jpg" rel="lightbox[photos]"><img src="images/album/11.jpg" alt=""/></a></li>
<li><a href="images/album/12.jpg" rel="lightbox[photos]"><img class="centered" src="images/album/12.jpg" alt=""/></a></li>
</ul>
</div>

2) Add a negative left margin equal to half of the overflown width

For example, let's say that your second image is 200px wide.

.single li is 160px, so we have 40px overflown. You can apply this class:

.single img.centered {
    margin-left:-20px; /* half of the overflown width */
}

and it'll be cropped on the center. "Demo".

P.S. If you want all the images to be centered, obv you don't need to add the class.

If you need a more specific answer, please provide your image's width/eight.

Upvotes: 1

Related Questions