정렬을 하기위해서는 Block요소의 태그에서 적용됩니다.
<h1>, <p>, <div> 등의 태그에서 쓸 수 있습니다.
주의 : 인라인태그에서는 적용되지 않습니다.
1. margin:auto를 이용한 중앙정렬
문단을 중앙 정렬하려면 margin:auto 속성을 사용합니다.
그런데 이 방법은 도큐타입이 정해지지 않았거나 ie8이하의 브라우저에서는 작동하지 않습니다.
왼쪽과 오른쪽 여백을 auto로 설정해도 같은 결과가 나옵니다.
margin-left:auto;
margin-right:auto;
[참고소스]
<!DOCTYPE html>
<html>
<head>
<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>Note: </b>Using margin:auto will not work in IE8, unless a !DOCTYPE is declared.</p>
</body>
</html>
2. left, right 속성을 사용하여 정렬
<!DOCTYPE html>
<html>
<head>
<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>
position:absolute; 요소는 정상흐름에서 제거되어서 요소를 겹치게 하는 결과를 초래할 수 있습니다.
위 예제에서는 right속성을 0으로 주어서 오른쪽에 정렬시켰네요.
position:relative로 하면 오른쪽으로 정렬되지 않습니다.
결국 이 방법은 비정상적인 방법이기 때문에 HTML문서에서 쓰기에는 썩 좋아보이지 않습니다.
3. float 속성을 이용한 정렬
<!DOCTYPE html>
<html>
<head>
<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>
이렇게 float:right라고 하면 오른쪽으로 흘러가 붙습니다.
정렬을 사용할때 주의할 점
다른 브라우저에서의 시각적인 차이를 막으려면 항상 <body>요소의 여백과 패딩을 미리 정해 놓는 것이 좋습니다. ie8이전 버전이나 !DOCTYPE 이 선언되어 있지 않은 경우 오른쪽에 17px의 여백을 추가합니다.
'WEB_TECH > CSS2' 카테고리의 다른 글
| CSS image sprite (0) | 2013.05.15 |
|---|---|
| CSS 박스모델이 무엇인가요? (0) | 2013.04.26 |
| 브라우저 사이즈만큼 이미지 늘어나게 만들기 (0) | 2013.04.25 |
| 레이아웃 예제 모은 사이트 경로 (0) | 2012.10.31 |
| CSS 기본문법 (2) | 2012.10.31 |
| 간단한 레이아웃 예제 (0) | 2012.10.22 |
