CSS가 DIV 수평 센터링을 제어하는 문제에 대해

저자：Eve Cole 업데이트 시간：2009-05-31 01:02:34

DIV의 수평 중심을 제어하는 CSS 문제와 관련하여 많은 신규 사용자가 혼란스러워하는 것을 봅니다. CSS를 처음 읽었을 때 외국인이 쓴 책에서 센터링 사용법에 대해 이야기했던 기억이 납니다.

여백 왼쪽:자동;
여백 오른쪽:자동;

실제로는 다음과 같습니다.

여백:0 자동;

그래서 이 방법을 사용하면 되지만, IE를 사용하면 중앙에 위치하지 않는다는 분들도 계셨습니다. DTD 선언이 누락되었는지 확인하는 것이 좋습니다.

많은 사람들이 비슷한 실수를 저질렀습니다! 이 방법도 시도되고 테스트되었다고 할 수 있지만 어떤 경우에는 여전히 작동하지 않습니다. 그래서 두 번째 방법이 있습니다.

왼쪽 여백:50%;
왼쪽: -너비/2;

여기서 너비는 CSS의 너비가 아니라 DIV의 너비입니다. 예를 들어 div의 너비가 768px인 경우 left:-384px를 설정해야 합니다. 아주 좋습니다. 발생할 수 있는 문제를 해결했다고 할 수 있는 두 가지 방법이 이미 있습니다.

때로는 이 두 가지만으로는 충분하지 않다는 것을 알게 될 것입니다. 일부 브라우저와 호환되지 않습니다. 그래서 IE를 주로 고려하고 첫 번째 방법을 기반으로 하는 세 번째 방법을 찾았습니다. 본체 설정이 필요합니다.

본문 {텍스트 정렬: 중앙;}

이런 식으로 IE에서도 중앙에 위치하지만 새로운 문제가 발생합니다. 페이지의 모든 텍스트가 중앙에 위치하여 보기에 좋지 않습니다. 이 문제는 해결하기 쉽습니다. DIV 정의에 text-align: left 및 기타 조정 설정을 추가하기만 하면 됩니다.

위의 텍스트는 단지 저녁 식사 후 참조 및 스케치입니다. 실제 업무에서는 누구나 주목할 수 있습니다!

CSS가 DIV 수평 센터링을 제어하는 ​​문제에 대해