CSS에서 정렬을 설정하는 방법
- 醉折花枝作酒筹원래의
- 2021-04-20 17:22:537409검색
설정 방법: 1. "margin:0px auto" 문을 사용하여 수평 정렬을 설정합니다. 2. 위치 속성과 위쪽, 아래쪽, 왼쪽 및 오른쪽 속성을 사용하여 왼쪽 또는 오른쪽 정렬을 설정합니다. float:right|left" 문은 왼쪽 또는 오른쪽 정렬을 설정합니다.
이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.
1. 여백 속성을 사용하여 가로로 정렬합니다.
왼쪽 및 오른쪽 여백을 "자동"으로 설정하여 요소를 정렬할 수 있습니다. 하지만 전제는 그것이 명시되어야 한다는 것입니다! DOCTYPE, 그렇지 않으면 IE8에서는 유효하지 않습니다. 이렇게 하면 요소가 중앙에 배치됩니다. 예:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>document</title>
<style>
div{
margin: 0px auto;
width: 70%;
height: 300px;
background-color: red;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
팁: 너비가 100%이면 정렬이 적용되지 않습니다.
2. 좌우 정렬을 위해 position 속성을 사용하세요
이 방법을 사용하는 것이 호환성 측면에서 가장 좋은 방법임에는 틀림없지만, position 속성을 사용할 경우 IE8 이하에서는 항상 !DOCTYPE 문을 설정해 주세요. 버전에 문제가 있습니다. 컨테이너 요소(이 경우에는
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>document</title>
<style>
body{
margin: 0;
padding: 0;
}
.container{
position: relative;
width: 100%;
}
.right{
position: absolute;
right: 0px;
width: 300px;
height: 50px;
background-color: red;
}
</style>
</head>
<body>
<div class="container">
<div class="right"></div>
</div>
</body>
</html>3 왼쪽 및 오른쪽 정렬에 float 속성을 사용하세요
IE8 및 이전 버전에서는 float 속성을 사용할 때 문제가 있습니다. !DOCTYPE 선언이 생략되면 IE8 이하에서는 오른쪽에 17px 여백을 추가합니다. 이는 스크롤바를 위해 예약된 공간인 것 같습니다. float 속성을 사용할 때 항상 !DOCTYPE 선언을 설정하세요. 예:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>document</title>
<style>
body{
margin: 0;
padding: 0;
}
.right{
float: right;
width: 300px;
height: 50px;
background-color: red;
}
</style>
</head>
<body>
<div class="container">
<div class="right"></div>
</div>
</body>
</html>
권장 학습: css 비디오 튜토리얼
위 내용은 CSS에서 정렬을 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!