Comment centrer un élément positionné en absolu dans CSS

J'ai cherché des réponses à mon problème, mais j'ai surtout trouvé des réponses à un problème qui semble similaire mais reste différent.Comment centrer un élément positionné en absolu dans CSS

J'ai une image sur laquelle j'essaye de placer plusieurs autres images plus petites. J'ai placé l'image plus grande dans un afin que je puisse utiliser la "position: inherit" sur mes plus petites images, et cela fonctionne très bien: mes images sont parfaitement bien placées sur leur arrière-plan. Mon problème est que, pour fonctionner, cela nécessite que mon image plus grande soit appelée "position: absolute". Par conséquent, je suis incapable de déplacer mon engin entier à n'importe où sur la page, mais le côté supérieur gauche où il réside actuellement.

FICHIER HTML:

<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 FICHIER:

#Map { 
background-image:url('CoreMini.png'); 
height:128px; 
width:256px; 
position:absolute; 
} 

#X0001Y0001{position:inherit;top:0px; left:9px}

Source

2013-02-14 Anonymous

Enveloppez votre #Map div dans un div parent, et donner la div parent ce qui suit:

#parent { 
    position: relative; 
    margin: 0 auto; 
    width: 256px; 
}

Voir DEMO.

Source

2013-02-14 06:40:43 zakangelle

Parfait! Merci beaucoup :) –

Pas de problème, content de pouvoir aider :) – zakangelle

Depuis votre #Map est absolute puis pour positionner votre image votre besoin d'utiliser left et top. Cela vous aidera à positionner vos images

Source

2013-02-14 06:59:50 asifsid88

Comment centrer un élément positionné en absolu dans CSS

Répondre

Questions connexes