DIV의 수평 중심을 제어하는 CSS 문제와 관련하여 많은 신규 사용자가 혼란스러워하는 것을 봅니다. CSS를 처음 읽었을 때 외국인이 쓴 책에서 센터링 사용법에 대해 이야기했던 기억이 납니다.
여백 왼쪽:자동;
여백 오른쪽:자동;
실제로는 다음과 같습니다.
여백:0 자동;
그래서 이 방법을 사용하면 되지만, IE를 사용하면 중앙에 위치하지 않는다는 분들도 계셨습니다. DTD 선언이 누락되었는지 확인하는 것이 좋습니다.
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
많은 사람들이 비슷한 실수를 저질렀습니다! 이 방법도 시도되고 테스트되었다고 할 수 있지만 어떤 경우에는 여전히 작동하지 않습니다. 그래서 두 번째 방법이 있습니다.
왼쪽 여백:50%;
왼쪽: -너비/2;
여기서 너비는 CSS의 너비가 아니라 DIV의 너비입니다. 예를 들어 div의 너비가 768px인 경우 left:-384px를 설정해야 합니다. 아주 좋습니다. 발생할 수 있는 문제를 해결했다고 할 수 있는 두 가지 방법이 이미 있습니다.
때로는 이 두 가지만으로는 충분하지 않다는 것을 알게 될 것입니다. 일부 브라우저와 호환되지 않습니다. 그래서 IE를 주로 고려하고 첫 번째 방법을 기반으로 하는 세 번째 방법을 찾았습니다. 본체 설정이 필요합니다.
본문 {텍스트 정렬: 중앙;}
이런 식으로 IE에서도 중앙에 위치하지만 새로운 문제가 발생합니다. 페이지의 모든 텍스트가 중앙에 위치하여 보기에 좋지 않습니다. 이 문제는 쉽게 해결됩니다. DIV 정의에 text-align: left 및 기타 조정 설정을 추가하기만 하면 됩니다.
위의 텍스트는 단지 저녁 식사 후 참조 및 스케치입니다. 실무에서는 누구나 주목할 수 있습니다!