Home/ Questions/Q 6331019
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-24T17:58:45+00:00

i have a div with position:relative . Inside that div i have placed images

  • 0

i have a div with position:relative.
Inside that div i have placed images with position:absolute because i’m going to have a slideshow with fadeIn and Fade out and the images have to be positioned absolute.

I would like to align the absolute-positioning images in the center
of their parent div. Can this be done??
Cause in the css part i have already defined all the images to be

left:0px;

My coding is as follows:

<html>
<head>
<style type="text/css">

div img{

    border:1px solid blue;
    position:absolute;
    left:0px;
    top:0px;
}
</style>
</head>

<body>
<div style="border:2px solid red;position:relative;width:500px;height:300px;">

    <img src="01.JPG" width="403" height="300"/>    
    <img src="02.JPG" width="403" height="300"/>
    <img src="03.jpg" width="170" height="290"/> <!-- this is a portrait,BIG problem         here!!! --> <!-- The image is positioned left -->
</div>

</body>
</html>

Thanks, in advance!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Set:

    left:50%; margin-left:-<image width/2>px

    So in this case, for the third image:

    left:50%; margin-left:-85px

    See: http://jsbin.com/ufiqum

    • 0