How to center an absolutely positioned item in CSS
Question
I've been looking around for answers to my problem, but i've mostly found answers to a problem that looks similar but remains different.
I have an image on which i am trying to place several other smaller images. I placed the larger image in a so that i could use the "position:inherit" on my smaller images, and this works great : my images are perfectly well placed on their background.
My issue is that, in order to work, this requires my larger image to be styled as "position:absolute". Hence, i'm unable to move my whole contraption to anywhere on the page but the top-left side where it currently resides.
HTML FILE :
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="Map">
<img id="X0001Y0001" src="blue_brick.png">
</div>
</body>
</html>
CSS FILE :
#Map {
background-image:url('CoreMini.png');
height:128px;
width:256px;
position:absolute;
}
#X0001Y0001{position:inherit;top:0px; left:9px}
2 answers
solution1
1 ACCPTED 2013-02-14 06:40:43
Wrap your #Map div in a parent div, and give the parent div the following:
#parent {
position: relative;
margin: 0 auto;
width: 256px;
}
See DEMO .
solution2
0 2013-02-14 06:59:50
Since your #Map is absolute then to position your image your need to use left and top . This will help you in positioning your images
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.