CODEWITHSUNDEEP
htmlcsscss-position
user1543470
user1543470

Reputation:

How to center an absolutely positioned item in CSS

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}

Upvotes: 0

Views: 66

Answers (2)

asifsid88
asifsid88

Reputation: 4701

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

Upvotes: 0

zxqx
zxqx

Reputation: 5205

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.

Upvotes: 1

Related Questions