CSS 정렬(정렬)
CSS Horizontal Align (Horizontal Align)
CSS에는 요소의 가로 정렬을 위한 여러 속성이 있습니다.
블록 요소 정렬
블록 요소는 전체 너비를 차지하고 줄 바꿈으로 둘러싸인 요소입니다.
블록 요소의 예:
<h1>
<p>
<div>
텍스트 정렬, CSS Text 장을 참조하세요. .
이 장에서는 레이아웃에서 블록 요소를 수평으로 정렬하는 방법을 설명합니다.
중앙 정렬, 여백 속성 사용
블록 요소는 왼쪽 및 오른쪽 여백을 "자동" 정렬로 설정할 수 있습니다.
참고: IE8에서 margin:auto 속성을 사용하면 !DOCTYPE을 선언하지 않으면 제대로 작동하지 않습니다.
margin 속성은 왼쪽 및 오른쪽 여백 설정으로 임의로 분할되어 자동으로 지정될 수 있습니다. 결과는 중앙 요소가 됩니다.
Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
.center
{
margin:auto;
width:70%;
background-color:#b0e0e6;
}
</style>
</head>
<body>
<div class="center">
<p>In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.</p>
<p>'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'</p>
</div>
<p><b>注意: </b>使用 margin:auto无法兼容 IE8, 除非!DOCTYPE已经声明.</p>
</body>
</html>예제 실행»
"예제 실행" 버튼을 클릭하세요. 온라인 보기 예
팁: 너비가 100%이면 정렬이 적용되지 않습니다.
참고: IE5에는 블록 요소에 대한 여백 처리 버그가 있습니다. 위의 예제가 IE5에서 작동하려면 몇 가지 추가 코드를 추가해야 합니다. 예
위치 속성을 사용하여 왼쪽 및 오른쪽 정렬 설정
요소를 정렬하는 방법 중 하나는 절대 위치 지정을 사용하는 것입니다.
Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
.right
{
position:absolute;
right:0px;
width:300px;
background-color:#b0e0e6;
}
</style>
</head>
<body>
<div class="right">
<p>In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.</p>
<p>'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'</p>
</div>
</body>
</html>예제 실행 »
"예제 실행"을 클릭하세요. 온라인 예시를 보려면 버튼
참고: 절대 위치 지정은 문서 흐름과 관련이 없으므로 페이지의 다른 요소를 오버레이할 수 있습니다.
float 속성을 사용하여 왼쪽 및 오른쪽 정렬 설정
float 속성을 사용하는 것은 요소를 정렬하는 방법 중 하나입니다.
Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
.right
{
float:right;
width:300px;
background-color:#b0e0e6;
}
</style>
</head>
<body>
<div class="right">
<p>In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.</p>
<p>'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'</p>
</div>
</body>
</html>예제 실행»
"인스턴스 실행" 버튼을 클릭하세요. 온라인 예제 보기
패딩을 사용하여 수직 중앙 정렬 설정
CSS에서 수직 중앙 정렬을 설정하는 간단한 방법은 머리 상단에 패딩을 사용하는 것입니다.
저는 수직 중앙 정렬입니다.
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
.center {
padding: 70px 0;
border: 3px solid green;
}
</style>
</head>
<body>
<h2>垂直居中</h2>
<p>以上实例，我们使用 padding 属性实现元素的垂直居中：</p>
<div class="center">
<p>我是垂直居中的。</p>
</div>
</body>
</html>인스턴스 실행 ?
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요
가로와 세로 모두 중앙에 배치하려면 padding과 text-align을 사용할 수 있습니다. center:
가로와 세로 모두 중앙에 배치됩니다.
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
.center {
padding: 70px 0;
border: 3px solid green;
text-align: center;
}
</style>
</head>
<body>
<h2>Centering</h2>
<p>以下实例，我们使用 padding 和 text-align 让 div 元素的水平和垂直方向都居中:</p>
<div class="center">
<p>我是水平和垂直都居中的。</p>
</div>
</body>
</html>인스턴스 실행 ?
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요.
줄 높이를 사용하여 세로 가운데 맞춤을 설정하세요
세로 중앙에 맞춰져 있습니다. Re 예제
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
.center {
line-height: 200px;
height: 200px;
border: 3px solid green;
text-align: center;
}
.center p {
line-height: 1.5;
display: inline-block;
vertical-align: middle;
}
</style>
</head>
<body>
<h2>居中</h2>
<p>以下实例中，我们让 line-height 属性值和 height 属性值相等来设置 div 元素居中：</p>
<div class="center">
<p>我是垂直居中的。</p>
</div>
</body>
</html> 위치 및 변환 사용 수직 설정
또한 변환을 사용할 수도 있습니다. 수직 센터링을 설정하는 속성:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
.center {
height: 200px;
position: relative;
border: 3px solid green;
}
.center p {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<h2>居中</h2>
<p>以下实例中，我们使用了 positioning 和 transform 属性来设置水平和垂直居中：</p>
<div class="center">
<p>我是水平和垂直居中的。</p>
</div>
<p>注意: IE8 及更早版本不支持 transform 属性。</p>
</body>
</html>이와 같은 요소를 정렬할 때는 항상 요소의 여백과 패딩을 미리 결정하는 것이 좋습니다. 이는 다양한 브라우저에서 시각적 차이를 방지하기 위한 것입니다.
IE8 및 이전 버전에서는 float 속성을 사용할 때 문제가 있습니다. 컨테이너 요소(이 경우 <div class="container">)에 지정된 너비가 있고 !DOCTYPE 선언이 누락된 경우 IE8 및 이전 버전에서는 오른쪽에 17px 여백을 추가합니다. 이것은 스크롤되는 예약된 공간인 것 같습니다. float 속성을 사용할 때는 항상 DOCTYPE 선언에 설정하세요!
Instance<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
body
{
margin:0;
padding:0;
}
.right
{
float:right;
width:300px;
background-color:#b0e0e6;
}
</style>
</head>
<body>
<div class="right">
<p><b>注意: </b>当使用浮动属性对齐,总是包括!DOCTYPE声明!如果丢失,它将会在IE浏览器产生奇怪的结果。</p>
</div>
</body>
</html>
