CSS 가로 정렬
블록 요소 정렬
블록 요소는 앞뒤에 줄 바꿈이 포함되어 전체 너비를 차지하는 요소입니다.
블록 요소의 예:
<h1>
<p>
<div>
여기에 이번 장에서는 레이아웃에서 블록 요소를 수평으로 정렬하는 방법을 보여 드리겠습니다.
가운데 정렬, 여백 속성
블록 요소를 사용하여 왼쪽 및 오른쪽 여백을 "자동" 정렬로 설정합니다.
참고: IE8에서 margin:auto 속성을 사용하면 선언되지 않으면 제대로 작동하지 않습니다!DOCTYPE
margin 속성은 왼쪽 및 오른쪽 여백 설정으로 임의로 분할하여 결과를 자동으로 지정할 수 있습니다. 중앙에 있는 요소가 나타납니다:
인스턴스
.center
{
margin-left:auto;
margin-right:auto;
width:70%;
background-color:#b0e0e6;
} 팁: 너비가 100%이면 정렬이 효과가 없습니다.
참고: IE5의 블록 요소에는 여백 처리 버그가 있습니다. 위의 예제가 IE5에서 작동하려면 몇 가지 추가 코드를 추가해야 합니다.
크로스브라우저 호환성 문제
<p 이와 같은 요소를 정렬할 때는 항상 요소의 여백과 패딩을 미리 결정해 두는 것이 좋습니다. 이는 다양한 브라우저에서 시각적 차이를 방지하기 위한 것입니다.
IE8 이하에서는 position 속성을 사용할 때 문제가 있습니다. 컨테이너 요소(이 경우 <div class="container">)에 지정된 너비가 있고 !DOCTYPE 선언이 누락된 경우 IE8 및 이전 버전에서는 오른쪽에 17px 여백을 추가합니다. 이것은 스크롤되는 예약된 공간인 것 같습니다. position 속성을 사용할 때는 항상 DOCTYPE 선언에 설정하세요!
float 속성을 사용하여 왼쪽 및 오른쪽 정렬 설정
float 속성을 사용하는 것은 요소를 정렬하는 방법 중 하나입니다.
예
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.right
{
float:right;
width:300px;
background-color:#b0e0e6;
}
</style>
</head>
<body>
<div class="right">
<p>凡是到达了的地方，都属于昨天。哪怕那山再青，那水再秀，那风再温柔。带深的流连便成了一种羁绊，绊住的不仅是双脚，还有未来。</p>
<p>怎麽能不喜欢出发呢？没见过大山的巍峨，真是遗憾；见了大山的巍峨没见过大海的浩翰，仍然是遗憾；
见了大海的浩翰没见过大漠的广袤，依旧遗憾；见了大漠的广袤没见过森林的神秘，还是遗憾。世界上有不绝的风景，我有不老的心情。</p>
</div>
</body>
</html>크로스브라우저 호환성 문제
이렇게 요소를 정렬할 때는 항상 요소의 여백과 패딩을 미리 결정해 두는 것이 좋습니다. 이는 다양한 브라우저에서 시각적 차이를 방지하기 위한 것입니다.
IE8 이하에서는 float 속성을 사용할 때 문제가 있습니다. 컨테이너 요소(이 경우 <div class="container">)에 지정된 너비가 있고 !DOCTYPE 선언이 누락된 경우 IE8 및 이전 버전에서는 오른쪽에 17px 여백을 추가합니다. 이것은 스크롤되는 예약된 공간인 것 같습니다. float 속성을 사용할 때는 항상 DOCTYPE 선언에 설정하세요!
인스턴스
아아앙
다음 섹션