2011-12-17 2 views
1

머리글 중간에 로고를 배치하고이를 buttom으로 푸시하려고합니다. 이미지가 크롬과 IE9의 머리 부분에있을 때 파이어 폭 크기 (px, em, %) 크기에 문제가 있습니다. 파이어 폭스에서는 테두리에서 벗어납니다 (오버 플로우?).CSS : 머리글의 이미지 위치

거기에 모든 브라우저에서 div의 buttom에 그 문제에 대한 이미지 또는 개체를 배치하는 방법이 있습니까? 여기

내 코드, mybee가 무엇 메신저 worng하고 당신에게 아이디어를 줄 것이다 :

CSS :

#header 
{ 
    background-image:url("../images/roundShapBrickWall.jpg"); 

    background-repeat:repeat-x; 

    position:relative; 
    width:inherit; 
    height:14.1em; 


} 
#header img 
{ 
    position:relative; // <--- somewhere here i think is the problem. 
    width:50%; 
    top:17%; 
} 

정보 :이 내가 그것을해야 할 위치, 그것은 중간에 앉아 머리글의 buttom,하지만 파이어 폭스 헤더의 테두리에서 나가기.

어떤 아이디어가 있습니까?

답변

4

시도해 보셨습니까? "위치 : 절대, 하단 : 0;" "#header img"에 추가 하시겠습니까?

+0

트릭을 한 네! 그리고 나는 새로운 것을 배웠다. 새로운 감사한다! – samy

+0

그게 좋습니다! 이 질문에 답이 나면 자유롭게 대답으로 표시하십시오. – JNadal

1

구역 text-align: center을 설정하고 여백으로 이미지 위치를 조정하여 position:relativeposition:absolute을 사용하지 않아도됩니다. 또한 세로 위치는 여백으로 설정할 수 있습니다. 그러나 이것은 헤더에 다른 내용이없는 경우에만 작동합니다.