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