마진 왜 : 제대로 여기

을 자동으로 계산되지 않는이 사이트에 있어요 : https://dev.notevenpast.org/brian-levack-possession-and-exorcism/마진 왜 : 제대로 여기

이 페이지에서 월별 - 기능 - 배너의 ID로 사업부 내에서 이미지 중심을 시도하고있다. 다음은 배너 및 이미지의 스타일입니다.

#monthly-feature-banner { 
    width: 100%; 
} 
#monthly-feature-banner img { 
display: block; 
margin: 0 auto; 
}

그래도 Chrome과 FF에서는 이미지 여백이 동일하지 않습니다.

질문 : 왜 이런 일이 발생합니까? 질문 : 문제를 해결하려면 어떻게해야합니까?

편집 : 아래의 답변은 text-align: center;이 (가) margin: 0 auto;과 동일한 문제가 있음을 나타내며 작동하지만 작동하지 않습니다. 또한 상자 크기 조정은 전체 페이지에서 제거하면 도움이되지만 비효율적 인 부작용이 있습니다. @Alohi의 아래 주석은 margin: 0 auto;과 함께 포함 된 div에 clear: left;을 추가하면 원하는 효과가 있음을 올바르게 지적했습니다. 그 정보가 들어있는 첫 번째 대답을 수락합니다.

출처

2014-02-25 vlasits

문제는 경계 상자 레이아웃입니다 ... 그래도 왜 그럴 수 있는지 알아 내려고합니다. –

본문 요소의 글꼴 크기 또는 줄 높이를 제거하면 문제가 해결되는 것 같습니다. 어쩌면 부동 문제가 있음을 나타낼 수 있습니다. 제대로 정리되지 않았을 수 있습니까? –

@MattK 과연. '# monthly-feature-banner {clear : 왼쪽; }'이 문제를 해결합니다. – Alohci

그래서, width: 100%;을 #monthly-feature-banner img를 제거하고 당신이 다른 폭이 이미 100 % 무언가에 #monthly-feature-banner을 수정하려고하지 않는 한 text-align: center-#monthly-feature-banner

를 추가 시도하거나 당신이 어떤 display:block; 스타일은 쓸데없는, div 자체는 블록입니다. 한마디로

#monthly-feature-banner { 
    text-align: center; 
}

바이올린 :

이미지가 왼쪽에 떠있는 요소를 허용하지하는 clear: left;를 추가 시도 할 수 오른쪽으로 밀려 계속되면 http://jsfiddle.net/Gs6rG/.

출처

2014-02-25 23:02:12 Marcel

그 답은 대개 작동합니다. 그것은 내 경우에는 작동하지 않습니다. 이상한 문제가 여전히 남아 있습니다. 예상대로 작동합니다. 그러나 # monthly-feature-banner를 지우고 답을 조합하면 제대로 작동했습니다. 답을 수정하여 "clear : left;"를 추가하면 나는 그것을 받아 들일 것이다. – vlasits

@vlasits 나는 그것을 추가했는데 그것은 의미가 있지만 문제를 다시 만들 수는 없다. 모든 스타일을 다음에 추가했습니다. http://jsfiddle.net/Gs6rG/1/ – Marcel

나는 그것을 재현 할 수 없다는 것에 놀랍지 않습니다. 나는 꽤 예리한 케이시 인 것 같은 느낌이 든다. 또한 # monthly-feature-banner div 바로 앞에있는 div와 관련이 있다고 확신합니다. 그 중 하나에 위치가 정의되어 있습니다. 그 div를 추가하여 그것을 다시 만들려고 : http://jsfiddle.net/Gs6rG/2/하지만 못했습니다. – vlasits

이

#monthly-feature-banner { 

    width: 100%; 
    margin: 0 auto; 

}

출처

2014-02-25 22:49:51

작동해야하지만 작동하지 않아야합니다. 명확한 추가 : 해당 div 왼쪽으로 필요했습니다. – vlasits

마진 왜 : 제대로 여기

답변

관련 문제