CSS Centering Images help

[kennethk]

Need a bit of help, I have two images here they are centering but I’m trying to get them besides each other. Heres what I have.

.img {



margin-left: auto;

margin-right: auto;

width: 8em;







}

And the HTML…

[joshuanhibbert]

Replace:

.img {

margin-left: auto;

margin-right: auto;

width: 8em;

}

with:

.img {

text-align: center;

}​

Then, if you want to adjust their vertical alignment, you can do so with the vertical-align property:

.img img {

vertical-align: middle; /* bottom, top, or any of the other options */

}

[chrisburton]

@joshuanhibbert Question: What about when you have an unknown height and width and want to set an image vertically/horizontally center dynamically?

I apologize for the hijack

[joshuanhibbert]

@ChristopherBurton I generally use one of the techniques here: https://css-tricks.com/centering-in-the-unknown/

The upside is that you don’t need to use any extra markup, the downside is that it won’t work in IE7.

[chrisburton]

@joshuanhibbert Thanks. Too bad I need a jQuery solution.

I found this

jQuery.fn.center = function () {

this.css("position","absolute");

this.css("top", (($(window).height() - this.outerHeight()) / 2) +

$(window).scrollTop() + "px");

this.css("left", (($(window).width() - this.outerWidth()) / 2) +

$(window).scrollLeft() + "px");

return this;

}



// Now we can just write:



$(element).center();

Solved: Result

[joshuanhibbert]

Ah, right. I did something similar a while ago that might be worth looking at: http://jsfiddle.net/joshnh/Ff5hm/

It’s not as flexible as what you are currently using, but it is less code for a single image.

[chrisburton]

@joshuanhibbert Actually that worked perfect. Thanks again.

[joshuanhibbert]

@ChristopherBurton No worries!

[kennethk]

Thank you for the quick help and reply!

[noahgelman]

How about this? No js needed. Moves re-centers dynamically when re-sized.
http://jsfiddle.net/joshnh/Ff5hm/

[Author]

Posts