How can I center my images horizontally and vertically inside my div?

Question

Images are all different sizes. I'm using some jquery to resize them proportionally at 170px to fit inside the 180px #co-logo div. How can I get them to line up in the center of that #co-logo? I can't find a solution that works.

#co-logo 
{
    float: left;
    width: 180px;
    height: 180px;
    margin: 20px 0 20px 20px;
    background-color: White;
    border: 1px solid #d6d5d5;
    text-align: center;
    position: relative;
}

#co-logo img
{
    position: absolute;
    top: 50%;
    left: 50%;

}

screenshot of div and images inside

possible duplicate of [How to make an image center (vertically & horizontally) inside a bigger div](http://stackoverflow.com/questions/388180/how-to-make-an-image-center-vertically-horizontally-inside-a-bigger-div) — Devin Burke, Oct 13 '11 at 17:15

score 2 · Accepted Answer · edited May 23 '17 at 10:32

As you can see in your example, the images are positioned at the center (starting from the top left corner).

To make the center the way you desire, I suggest this solution: How to make an image center (vertically & horizontally) inside a bigger div

Since you're already using jQuery to manipulate the image's size, add their margin-top and margin-left programmatically (half for each).

EDIT:

(I don't know how you're placing the image size, you may need to change the height() and width() by $("#co-logo img").css('height') and $("#co-logo img").css('width'))

The javascript with jQuery to add the inline styles: simplified:

$("#co-logo img").css({'margin-top': -($("#co-logo img").height() / 2) + "px", 'margin-left': -($("#co-logo img").width() / 2) + "px"});

explained:

//get the image size:
var theHeight = $("#co-logo img").height();
var theWidth = $("#co-logo img").width();

//place them into the image styles:
$("#co-logo img").css({'margin-top': -theHeight / 2 + "px", 'margin-left': -theWidth / 2 + "px"});

EDIT 2:

Using each to loop between every image.

Assuming you had the same ID for each block, you need to swap it with a class, like .co-logo instead of #co-logo (because IDs are unique), call the each like this:

$(".co-logo").each(function(){
    $("img", $(this)).css({'margin-top': -($("img", $(this)).height() / 2) + "px", 'margin-left': -($("img", $(this)).width() / 2) + "px"});
});

That will do the trick!

It takes the size of the first image and then uses that value as the basis for all the other images. Do I need to incorporate an each() in the function somewhere? — Trey Copeland, Oct 13 '11 at 18:27
@TCC yes. I didn't realize you had the images at the same page, in that case use `each` and don't forget that if you're repeating `#co-logo` you should replace the ID with a class because IDs are unique. — jackJoe, Oct 13 '11 at 18:34
can you please explain how to use the each() in this instance? — Trey Copeland, Oct 13 '11 at 19:09
@TCC just updated the question, that should point you into the right direction... — jackJoe, Oct 13 '11 at 19:57

Sanooj · Answer 2 · 2011-10-13T17:46:47.673

0

#co-logo  {
    width: 180px;
    height: 180px;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    margin: 20px 0 20px 20px;
    background-color: White;
    border: 1px solid #d6d5d5;
}

Don't Use float Left for this div, if you want to apply float:left for the div use another div outside

edited Oct 13 '11 at 17:46

answered Oct 13 '11 at 17:39

Sanooj

2,637
15
20

How can I center my images horizontally and vertically inside my div?

2 Answers2