Take the 2-minute tour ×

I have two images centered with body{text-align:center}, and their style max-width:100%.

I'm trying to keep the images in the center of the page, but I want them to scale as I resize the browser window (staying centered). As I resize the browser, the second image flips underneath the first one and they start scaling just afterwards.. they don't stay centered.

what am I doing wrong?


   <img src="emoticons-20110801-213224.png" />


img {
   max-width: 100%;

body {
   margin: 0;
   padding: 0;
   text-align: center;
share|improve this question

closed as not a real question by bfrohs, Sparky, brimborium, bookcasey, arshajii Nov 12 '12 at 23:05


Please post your html and css code. –  Billy Moat Nov 12 '12 at 16:35
@bfrohs, please delete your comments as they become obsolete. Thanks. –  Sparky Nov 12 '12 at 16:42
add comment

2 Answers

This should work for you (example):

<div class="centerImageWrapper">
    <img src="PATHTOIMAGE"><!--
    --><img src="PATHTOIMAGE">
/* Don't Change - Positioning */
.centerImageWrapper {

/* Sizing */
.centerImageWrapper img {
share|improve this answer
what about no absolute positioning? i was wondering if i was missing something very easy in my code or if to obtain this thing i have to find some complicated work-around like the one you posted. –  vlrprbttst Nov 12 '12 at 17:01
@omegaiori The absolute positioning is to force the images' heights to shrink with the page as well. It can also be done by setting html, body { height:100%; } (example). Alternatively, you can ignore the height and only resize if the browser width is too small (example). –  bfrohs Nov 12 '12 at 17:26
add comment

A codepen of this would be helpful, for others to play around with.

To achieve the effect you want, you will need to wrap the images in a containing div (which you center by declaring a width, and setting margin: 0 auto. After that, give the images a width. Alternately, use a combination of max-width and min-width to get the control you want.

.container {
  margin:0 auto;

img {

<div class="container">

Here is an example: http://codepen.io/anon/pen/Fnpub

share|improve this answer
add comment
