Forums

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

<div class="img">

<img src="xbox.jpg" width="273" height="211" />

<img src="wii.jpg" width="408" height="312" />


</div>

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: http://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/

treehouse : what would you like to learn today?

Forums

CSS Centering Images help