왜 “디스플레이:table-cell'은 '위치:순수한"

StackOverflow https://stackoverflow.com/questions/1608983

  •  05-07-2019
  •  | 
  •  

문제

이상한 문제가 발생했습니다.저는 DIV를 컨테이너로 사용하고 이 DIV에 이미지를 넣습니다.이 이미지를 아래쪽에 수직으로 정렬하고 싶습니다.다음 코드는 작동합니다.

#banner { 
  width: 700px; 
  height: 90px; 
  top: 60px; 
  left: 178px; 
  overflow: hidden; 
  text-align: center; 
  display: table-cell; 
  vertical-align: bottom; 
  position: relative;
}

<div id="banner">
  <img src="http://www.google.de/intl/de_de/images/logo.gif"/>
</div>

하지만 CSS 코드 "위치:상대"를 "위치:절대"인 경우 이미지를 더 이상 아래쪽에 정렬할 수 없습니다.이것은 Firefox3의 버그입니까?이 문제를 어떻게 해결할 수 있나요?

내 현재 솔루션은 다음과 같습니다

<div id="banner">
  <table width="100%" height="100%"><tr><td valign="bottom" align="center">
  <img src="http://www.google.de/intl/de_de/images/logo.gif"/>
  </td></tr></table>
</div>

그러나 나는 이 해결책이 마음에 들지 않습니다.

도움이 되었습니까?

해결책

짧은 답변:변화

top: 60px;

에게

bottom: 60px;

긴 답변:

선언 position: absolute 요소가 어디에 있든 꺼내서 정적으로 선언되지 않은 가장 안쪽 요소를 기준으로 배치합니다.더 이상 다른 요소의 정렬에 참여하지 않으므로 더 이상 테이블 셀 역할을 하지 않습니다(선언은 효과가 없습니다).추가적으로 다음과 같은 선언은 top: 10px 포함하는 요소의 상단으로부터 그만큼의 거리를 두고 배치한다는 의미입니다.

요소를 다음과 같이 선언 position: relative 와 같은 선언을 한다 top: 10px '현재 위치에서 위에서 10px 요소를 이동'을 의미합니다.상대적으로 선언된 요소가 다른 요소와 겹칠 수 있지만 원래 위치가 여전히 다른 요소의 배열을 결정한다는 점을 기억해야 합니다.

이것이 귀하의 질문에 대한 답변이 되기를 바랍니다.

다른 팁

당신은 또한 위치를 설정할 수도 있습니다 : 상대; 컨테이너는 배너 (#Banner 위치 : 상대; 및 IMG 위치 : 절대)를 만드는 컨테이너는 절대 위치를 바닥으로 설정하여 컨테이너의 바닥에 정렬합니다. 전체 페이지 인 경우 컨테이너의 너비와 높이를 100%로 설정하고 본체 또는 DIV에서 추가 패딩/여백을 제거하십시오.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top