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

당신이 상대 위치 사업부 내에서 절대 위치를 사용해야합니다. 그래서 당신은 로고와 폰트가 랩퍼 내부에 절대적으로 위치 할 필요가 있습니다 (이것은 상대적인 위치에 있어야합니다).

상대적으로 위치한 요소 내에 절대 위치를 갖는 요소는 부모 요소에 대해 처리됩니다. 래퍼에 상대적으로 로고 및 글꼴의 위치를 ​​제어 할 수 있습니다.

이 link