1. div태그의 display속성을 table로 설정하는 방법
- 테이블 처럼 만들어서 vertical-align 속성을 사용할 수 있도록 하는 방법이다.
- 높이가 변해도 항상 수직 정렬이 가능하다.
- 낮은 버전의 IE에서 작동하지 않는다.
- HTML
1
2
3
4
5
|
<div id="wrapper">
<div id="content">
<div>내용</div>
</div>
</div>
|
- CSS
1
2
3
4
5
6
7
8
|
#wrapper {
display: table;
}
#content {
display: table-cell;
vertical-align: middle;
}
|
2. position: absolute를 사용하는 방법
- 요소의 높이를 css에서 지정하는 방법이다.
- 모든 브라우저에서 작동한다.
- 내용이 길어지면 잘린다.
- HTML
1
2
3
|
<div id="content">
내용
</div>
|
- CSS
1
2
3
4
5
6
|
#content {
position: absolute;
top: 50%;
height: 240px;
margin-top: -120px;
}
|
※ top을 50%로 설정하고 margin-top을 요소 높이의 절반 만큼 음수로 설정한다.
3. line-height 속성을 이용한 방법
- 한 줄짜리 텍스트만 수직 가운데 정렬하는 방법이다.
- 모든 브라우저에서 작동한다.
- block요소에서는 작동하지 않고 오직 텍스트에서만 작동하며, 한 줄 이상이 되면 내용이 아래로 밀린다.
- HTML
1
2
3
|
<div id="content">
내용
</div>
|
- CSS
1
2
3
4
|
#content {
height: 240px;
line-height: 240px;
}
|
※ 컨텐츠를 담고 있는 요소의 height와 line-height 값을 같게 설정한다.
4. margin:auto를 이용한 방법
- div태그에 width와 height를 지정하고 position:absolute 속성을 지정하여 정렬하는 방법이다. margin: 0 auto; 와 비슷한 정렬 방식이다.
- 낮은 버전의 IE에서 작동하지 않는다.
- 내용이 길어지면 잘린다.
- HTML
1
2
3
|
<div id="content">
내용
</div>
|
- CSS
1
2
3
4
5
6
7
8
9
10
|
#content {
position: absolute;
width: 100px;
height: 100px;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
|
5. float와 clear를 이용한 방법
- float된 div태그를 두고, 내용이 들어간 태그에는 clear 속성을 주어서 정렬하는 방법이다. 코드로 확인하는 것이 쉬울 듯하다.
- 모든 브라우저에서 동작하지만, 내용이 길어지거나 브라우저 사이즈를 줄일 때 스크롤 바가 생길 수 있다.
- HTML
1
2
3
4
|
<div id="blank"></div>
<div id="content">
내용
</div>
|
- CSS
1
2
3
4
5
6
7
8
9
10
11
|
#blank {
float: left;
height: 50%;
margin-bottom: -50px;
}
#content {
position: relative;
clear: both;
height: 100px;
}
|
※ #blank에 height를 50%, margin-bottom을 #content높이의 절반으로 설정한다.
[HTML/CSS]수직 정렬 방법
![[HTML/CSS]수직 정렬 방법]()
Reviewed by 코알라
on
9월 20, 2018
Rating:
댓글 없음: