CSS에서 정렬을 설정하는 방법-CSS 튜토리얼-php.cn

CSS에서 정렬을 설정하는 방법

醉折花枝作酒筹

풀어 주다： 2023-01-05 16:10:10

원래의

7430명이 탐색했습니다.

설정 방법: 1. "margin:0px auto" 문을 사용하여 수평 정렬을 설정합니다. 2. 위치 속성과 위쪽, 아래쪽, 왼쪽 및 오른쪽 속성을 사용하여 왼쪽 또는 오른쪽 정렬을 설정합니다. float:right|left" 문은 왼쪽 또는 오른쪽 정렬을 설정합니다.

CSS에서 정렬을 설정하는 방법

이 튜토리얼의 운영 환경: 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>

로그인 후 복사

CSS에서 정렬을 설정하는 방법

팁: 너비가 100%이면 정렬이 적용되지 않습니다.

2. 좌우 정렬을 위해 position 속성을 사용하세요

이 방법을 사용하는 것이 호환성 측면에서 가장 좋은 방법임에는 틀림없지만, position 속성을 사용할 경우 IE8 이하에서는 항상 !DOCTYPE 문을 설정해 주세요. 버전에 문제가 있습니다. 컨테이너 요소(이 경우에는

)가 지정된 너비로 설정되고 !DOCTYPE 선언이 생략된 경우 IE8 및 이전 버전에서는 오른쪽에 17px의 여백을 추가합니다. 예:

<!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에서 정렬을 설정하는 방법