CODEWITHSUNDEEP
javascripthtmlcssimagecross-browser
Paradox
Paradox

Reputation: 3

How to center an image created in Javascript?

I have this very simple code, the problem is it doesn't give the same output using Firefox and IE: in Firefox, the images are superposed but right-aligned, and in IE they are superposed and left aligned. What I want is that the images will be centered and superposed. I have to create images using Javascript to use a special library in creating the images.

Thank you for your help.

HTML

<body>
    <div id="Container">
        <script type="text/javascript">
            document.write('<img id="image1" src="image1.jpg">')
            document.write('<img id="image1" src="image2.jpg">')
        </script>   
    </div>    
</body>

CSS

body {
    text-align: center;
    background-color: #e8e6e7;
    margin-left: auto;
    margin-right: auto;
}
#Container {
    position: relative;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}
#image1 {
    position : absolute;
    margin-left: auto;
    margin-right: auto;
}
#image2 {
    position : absolute;
    margin-left: auto;
    margin-right: auto;
}

Upvotes: 0

Views: 190

Answers (4)

Radley Sustaire
Radley Sustaire

Reputation: 3399

Since you are making #image1 and #image2 be absolutely positionined, they will not adjust the width/height of the #Container. This means you can't center it, because it doesn't have the proportions to center.

The code below makes only one image be absolutely positioned. This lets your other image act as expected. You can do whatever you want with the "overlay" image.

I also included z-index, which can let you change the order of the images. This isn't necessary for this example, but if you add more images, it may be useful.

HTML

<div id="Container">
    <div class="image-wrap">
        <img id="image1" src="http://dummyimage.com/200x200/fa00fa/fff.png"/>
        <img id="image2" src="http://dummyimage.com/200x200/00ff33/000000.png"/>
    </div>
</div>

CSS

#Container .image-wrap {
    position: relative;
    display: inline-block;
}
#image1 {
    position : relative;
    z-index: 10;
}
#image2 {
    position : absolute; /* Different than #image1 */
    z-index: 20; /* On top of #image2 */
    top: 0;
    left: 0;
    /* Assuming width/height of both images are the same */
}

JS Fiddle

http://jsfiddle.net/n496j/1/

Upvotes: 3

vsync
vsync

Reputation: 130085

well, it will help if the images would sit in some container with text-align:center;.

something like this:

// body can be be replaced with any element which contains the images
body{ text-align:center; }
body > img{ display:inline-block; max-width:49%; }

Demo page: http://jsbin.com/hehot/1/edit

Upvotes: 0

MeTe-30
MeTe-30

Reputation: 2542

First change second image id to image2.
2 tricks for centering your images is:

add one of these classes to your images: 

.center {
  display: block; /*can remove this line*/
  margin: 0 auto;
  left: 0;
  right: 0;
}

.center {
  left: 50%;
  margin-left: -[your image width / 2]
}

Upvotes: 1

Spencer Wieczorek
Spencer Wieczorek

Reputation: 21565

Use the css

img{  display:block; margin: auto; }

Upvotes: 0

Related Questions