如何在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. 我将较大的图像放在a中，以便可以在较小的图像上使用“ position：inherit”，而且效果很好：我的图像放置在背景上非常好。

My issue is that, in order to work, this requires my larger image to be styled as "position:absolute". 我的问题是，为了起作用，这要求将我的较大图像的样式设置为“ 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文件：

<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 : CSS文件：

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

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

Answer 1

Wrap your #Map div in a parent div, and give the parent div the following: 将您的#Map div包裹在父div中，然后为父div #Map以下内容：

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

See DEMO . 参见DEMO 。

Answer 2

Since your #Map is absolute then to position your image your need to use left and top . 由于#Map是absolute因此要定位图像，您需要使用left和top 。 This will help you in positioning your images 这将帮助您定位图像

如何在CSS中将绝对定位的项目居中

问题描述

2 个解决方案

解决方案1
1 已采纳 2013-02-14 06:40:43

解决方案2
0 2013-02-14 06:59:50

如何在CSS中将绝对定位的项目居中

问题描述

2 个解决方案

解决方案1 1 已采纳 2013-02-14 06:40:43

解决方案2 0 2013-02-14 06:59:50

解决方案1
1 已采纳 2013-02-14 06:40:43

解决方案2
0 2013-02-14 06:59:50