html - CSS - 可以使用一些关于正确定位的指针

Question

我需要一些关于定位的指示。我有一个应该位于页面中央的正方形。并带有 Logo 和 Logo 字体图像，有点环绕在正方形周围。现在，我希望它尽可能动态，因为我也在其他地方同时使用正方形和图像。所以我真的不能使用僵硬的静态定位。

这是网站:www.matkalenderen.no

我应该怎么做？我想让 Logo 出现在广场的左侧。以及出现在正方形上方的字体。广场本身应该居中。你可能明白了 :) 现在我有一个包裹所有东西的包装器，它也是居中的。

HTML

<div id="loginWrapper">
   <img class="LogoChef" alt="Logo" src="img/LogoKokk.png"/>
   <img class="LogoMatkalender" alt="Logo" src="img/MatkalenderLogo.png"/>
   <div id="content" style="width: 250px;"></div>
</div>

CSS

#loginWrapper {
margin-left:auto;
margin-right:auto;
padding-top:80px;
width:600px;
}

#content {
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
background-color:#EADCBA;
background-image:url(img/KalendarRedTint.png);
background-position:right top;
background-repeat:no-repeat;
border:5px solid #F1E9D5;
margin-left:auto;
margin-right:auto;
padding:5px;
}

Answer 1

您必须在相对定位的 div 内使用绝对定位。所以你的标志和字体需要绝对定位在包装器内(需要相对定位)。

在相对定位元素中具有绝对位置的元素相对于父元素进行处理。这使您可以控制 Logo 和字体相对于包装器的位置。

看这个link