CSS - может использовать некоторые указатели для правильного позиционирования

Question

Мне нужны некоторые указатели по позиционированию. У меня есть этот квадрат, который должен быть в центре страницы. И с логотипом и логотипом шрифта изображение вроде обернуто вокруг квадрата. Теперь я хочу, чтобы это было как можно более динамичным, потому что я использую как квадрат, так и изображения в других местах. Поэтому я не могу использовать жесткое статическое позиционирование.

Это сайт: www.matkalenderen.no

Как мне это сделать? Я хочу, чтобы логотип появился на левой стороне квадрата. И шрифт появится над квадратом. И сам квадрат должен быть в центре. Вы, вероятно, получите картину :) Прямо сейчас у меня есть обертка вокруг всего, что также по центру.

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

вам придется использовать абсолютное позиционирование внутри относительного позиционного элемента. Таким образом, ваш логотип и шрифт должны быть абсолютно позиционированы внутри оболочки (что должно быть относительным положением).

элементы, которые имеют абсолютную позицию внутри относительно позиционированного элемента, обрабатываются относительно родительского элемента. это дает вам возможность расположить логотип и шрифт относительно оболочки.

см. ссылку