왜 패딩 왼쪽 : 50 %가 결국 작동하지 않습니까?

div를 가운데에 놓기를 원하므로 <div style="padding-left: 50%;"> test </div>이라고 씁니다. 브라우저의 크기를 아주 작은 크기로 조정할 때까지 텍스트가 가운데에 잘 맞습니다. (~ 300 픽셀 너비). 그런 다음 가로 스크롤 막대를 표시하기 시작합니다.왜 패딩 왼쪽 : 50 %가 결국 작동하지 않습니까?

브라우저 (Chrome12, Opera11.50, Firefox5)가 해당 동작을 구현하는 이유는 무엇입니까? 내 마음 속에서 그것은 단순히 올바르지 않습니다. 스크롤바가 필요한 콘텐츠가 없습니다. 콘텐츠를 사용하지 않도록 설정하려면 어떻게해야합니까?

출처

2011-07-04 Blub

"스크롤바가 필요한 콘텐츠가 없습니다"단어 'test'가 콘텐츠가 아니란 뜻입니까? – BoltClock

가운데 div는 일반적으로 여백 속성이 아닌 여백 속성으로 처리됩니다. 브라우저마다 패딩을 다르게 처리하므로 여백을 사용하는 것이 안전합니다. –

@BoltClock : "test"텍스트의 길이가 300px 브라우저에서 스크롤 막대를 채울만큼 길지 않습니다. 왜 스크롤바가 나타나기 시작했을까요? – Blub

가운데에 텍스트를 사용하려면 text-align:center을 사용하십시오. 요소를 중앙에 놓으려면 margin:0 auto을 사용하십시오. 성취하고자하는 바에 대한 자세한 내용을 제공해주십시오.

overflow property을 수정하여 스크롤 막대가 나타나지 않도록 할 수 있습니다.

출처

2011-07-04 15:04:33 Radu

제 접근 방식이 작동하지 않는 이유는 제 질문이었습니다. 내 말은, 그것은 매우 직설적이어야합니다. 나는 왼쪽으로 50 % 패딩을하십시오. 그리고 그것은 작동하지 않습니다? – Blub

@Blub, 내가 인용 한 행동을 재현 할 수 없습니다. 참조 : http://jsfiddle.net/radu/K36Kq/show/. Chrome 12, FF3.6.7, Opera 11.10 및 IE9를 테스트했으며 스크롤 막대를 300px의 창 너비에 표시 할 수 없습니다. – Radu

여백을 사용하여 고정 폭 컨테이너의 가운데에 맞출 수 있습니다. 왼쪽 및 오른쪽 여백을 auto로 설정하면 div가 가운데에 배치됩니다.

<div style="width:900px;margin:0 auto;"> 
    test 
</div>

출처

2011-07-04 15:04:28 Jrod

왜 패딩 왼쪽 : 50 %가 결국 작동하지 않습니까?

답변

관련 문제