Advanced Search

Return to Snippet

Revision: 5289
at May 20, 2008 09:09 by teddyzetterlund
Updated Code 
/* Image Centering: Cross-Browser, vertical and horizontal image centering
----------------------------------------------------------------------------*/

/* Example markup:
<div class="image"><div class="image_align"><img src="yourimage.jpg" alt=""></div></div>
*/

.image {
	overflow: hidden;
	position: relative;
}

.image[class] {
	display: table;
	position: static;
}

.image_align[class] {
	display: table-cell;
	position: static;
	vertical-align: middle;
}

.image img { margin: auto; }

* html .image_iefix {
	position: relative;
	top: -50%;
}

* html .image_align {
	position: absolute;
	top: 50%;
}

Revision: 5288
at May 20, 2008 09:09 by teddyzetterlund
Updated Code 
/* Image Centering: Cross-Browser, vertical and horizontal image centering
----------------------------------------------------------------------------*/

/* Example markup:
<div class="image"><div class="image_align"><img src="yourimage.jpg" alt=""></div></div>
*/
.image {
	overflow: hidden;
	position: relative;
}

.image[class] {
	display: table;
	position: static;
}

.image_align[class] {
	display: table-cell;
	position: static;
	vertical-align: middle;
}

.image img { margin: auto; }

* html .image_iefix {
	position: relative;
	top: -50%;
}

* html .image_align {
	position: absolute;
	top: 50%;
}

Revision: 5287
at February 25, 2008 10:38 by teddyzetterlund
Initial Code 
/* Image Centering: Cross-Browser, vertical and horizontal image centering
----------------------------------------------------------------------------*/
.image {
	overflow: hidden;
	position: relative;
}

.image[class] {
	display: table;
	position: static;
}

.image_align[class] {
	display: table-cell;
	position: static;
	vertical-align: middle;
}

.image img { margin: auto; }

* html .image_iefix {
	position: relative;
	top: -50%;
}

* html .image_align {
	position: absolute;
	top: 50%;
}
Initial URL 

                                

                                                            

                                    

                                        

                                        Initial Description
                                        

                                    

                                    
I can't remember if this code is updated for IE7, if it is then it should be working in at least IE6-7, Safari 2-3, Opera 8 and Firefox 2-3.

Obviously the image_iefix is just for IE6.

                                

                                                            

                                    

                                        

                                        Initial Title
                                        

                                    

                                    
Vertical Centering of Images

                                

                                                            

                                    

                                        

                                        Initial Tags
                                        

                                    

                                    
css, html, images, center

                                

                                                            

                                    

                                        

                                        Initial Language
                                        

                                    

                                    
CSS