CSS 요소 가로 가운데를 표시 하는 일반적인 방법

CSS를 사용 하 여 요소 가운데는 하지는 간단한 것에 같은 합법적인 중심 CSS 설정 다른 브라우저에서 다르게 동작 합니다. 가로 요소를 중심으로 대 한 일반적인 CSS 방법 중 일부를 봐 보자.

1입니다. 자동 외부 여백 센터
CSS에서 가로 센터 요소를 선호 하는 방식 자동 여백 여백 왼쪽 및 여백-오른쪽 속성 요소의 속성 집합을 사용 하는 것입니다. 실제 사용에서 우리 중심으로 하는 이러한 요소에 대 한 컨테이너 연기 div를 만들 수 있습니다. 참고로 한 특정 포인트는 컨테이너에 대 한 너비를 지정 해야 합니다.
Div #container 없음

여백-왼쪽: 자동;

여백-오른쪽: 자동;

폭: 168px;

}

이 방법은 경우에 Windows 플랫폼에서 i e 6는 그것의 표준 호환 모드 (준수 모드)에서 제대로 표시 될 수 있습니다 대부분의 주류 브라우저에서 매우 효과적입니다. 불행히도, IE의 낮은 버전에서는이 설정을 않습니다 달성 하지 센터 효과. 그래서 실제 프로젝트에서이 메서드를 사용 하려는 경우 사용자의 인터넷 익스플로러 브라우저 버전 6.0 이상 되었는지 확인 합니다.
불만족 한 지원에도 불구 하 고 대부분의 디자이너는 가능한이 방법을 사용 하 여 것이 좋습니다. 이 메서드는 또한 요소의 수준을 달성 하기 위해 CSS를 사용 하 여 방법의 모든 종류에서 가장 정확 하 고 합리적인 한 것으로 간주 됩니다.
2.를 사용 하 여 텍스트-정렬 센터를 달성
요소 가운데 또 다른 방법은 센터 및 BODY 요소에 적용할 속성 값을 설정 하려면 텍스트 정렬 속성을 사용 하는 것입니다. 이 방식은 명백히 해킹, 하지만 그래서 그것을 자연스럽 게 어떤 경우에 필요한 대부분의 브라우저와 호환 될 수 있습니다.
그것은 해킹 때문에 텍스트 특성을 텍스트에 적용 되지 않습니다 하지만 대신 컨테이너 요소에 적용 됩니다. 또한이 우리에 게 추가 작업을 제공합니다. 필요한 div 레이아웃을 만든 후 우리 텍스트 맞춤 특성을 적용 시체 다음과 같습니다.

몸 없음

텍스트-정렬: 센터;

}

그 후 문제 있을 것 입니까? 시체의 모든 하위 항목을 중심으로 것입니다.
그래서 우리는 다시 기본 왼쪽된 맞춤 텍스트를 다른 규칙을 쓸 필요가:

p 없음
텍스트-정렬: 왼쪽;
}

그것은이 추가 규칙 몇 가지 불편을 가져올 것 이다 상상 될 수 있다. 또한, 브라우저는 정말 완전히 표준에 따라 컨테이너의 위치를 변경 하지 마십시오 하지만 텍스트 센터.
3. 결합 자동 외부 여백 및 텍스트 맞춤
텍스트 맞춤은 잘 이전 버전과 호환 자동 여백 메서드는 가장 현대적인 브라우저에서 지원 하기 때문에, 많은 디자이너 센터 효과 대 한 크로스-브라우저 지원을 극대화 하기 위해 두 가지를 결합:

몸 없음
텍스트-정렬: 센터;
}
#container 없음
여백-왼쪽: 자동;
여백-오른쪽: 자동;
국경: 1px 단단한 빨강;
폭: 168px;
텍스트-정렬: 왼쪽
}

하지만 이것은 항상 해킹, 어떤 경우에 완벽 하지. 우리 센터 컨테이너에 텍스트에 대 한 추가 규칙을 작성 해야 하지만 적어도 그것은 모든 브라우저에 좋아 보인다.
4. 부정적인 외부 거리 솔루션
부정적인 외부 여백 솔루션 보다 훨씬 더 간단 하 게 추가 하는 부정적인 여백 요소에. 이 방법은 두 절대 고 부정적인 외부 간격 기술을 요구 한다.
다음은 계획의 구체적인 구현입니다. 첫째, 중심된 요소를 포함 하는 컨테이너를 만들고 페이지의 왼쪽된 가장자리를 기준으로 50%에 절대적으로 배치 합니다. 이 방법에서는, 컨테이너의 왼쪽된 여백에서 페이지 50% 폭의 위치에 시작합니다.
그런 다음, 왼쪽 외부 여백 값 부정적인 컨테이너의 절반 폭을 컨테이너의 설정. 컨테이너를 페이지의 가로 방향의 중간점에 도킹 될 수 있습니다.

#container 없음
배경: #ffc URL (mid.jpg) 반복-y 센터;
위치: 절대;
왼쪽: 50%;
폭: 760px;
여백-왼쪽:-380px;
}

이 봐, 거기 아무 해킹이입니다!. 비록이 권장 되는 솔루션, 그것은 매우 적응할 수 있는-심지어 넷스케이프 네비게이터에서 좋은 방법 4.x 아무 문제 없이, 그것은 놀라운, 그렇지 않나요? 그래서 넓은 브라우저 지원을 원한다 면이 방법은 최선의 선택 됩니다.