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

Question

我一直在寻找问题的答案，但大多数情况下我都找到了看起来相似但仍然不同的问题的答案。

我正在尝试放置其他几个较小的图像的图像。 我将较大的图像放在a中，以便可以在较小的图像上使用“ position：inherit”，而且效果很好：我的图像放置在背景上非常好。

我的问题是，为了起作用，这要求将我的较大图像的样式设置为“ position：absolute”。 因此，我无法将整个设备移动到页面上除当前位置所在的左上侧以外的任何位置。

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

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

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

Answer 1

将您的#Map div包裹在父div中，然后为父div #Map以下内容：

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

参见DEMO 。

Answer 2

由于#Map是absolute因此要定位图像，您需要使用left和top 。 这将帮助您定位图像

如何在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