html - How to centralise images with an absolute position? -
this question has answer here:
i have 3 images in <div>
. want images overlay each other (for slideshow using opacity) , remain central on website.
to make images overlay set position absolute (position: absolute;
). however, conflicts method of centralising images. make images central, give images following properties: margin: 0 auto; display: block;
doesn't work when images' positions set absolute. other methods can use make images overlay and/or centralise images.
<div> <img id="slideshow1" src="images\image1.jpg" width="512" height="512"> <img id="slideshow2" src="images\image2.png" width="512" height="512"> <img id="slideshow3" src="images\image3.jpg" width="512" height="512"> </div> img { position: absolute; margin: 0 auto; display: block; }
another option using css3 transform
:
img{ display:block; position:absolute; left:50%; transform:translate(-50%,0); }
add vendor prefixes needed.
this has been mentioned in answer under question center image css (horizontal , vertical).
Comments
Post a Comment