728x90
Category
CSS에서 텍스트의 가로 가운데 정렬은 text-align 속성을 이용합니다.
text-align: center;요소의 가로 가운데 정렬은 margin 속성을 이용합니다.
margin-left: auto;
margin-right: auto;그렇다면 다음처럼 세로 정렬을 가운데로 하려면 어떻게 해야 할까요?
여러 가지 방법이 있는데, 그 중 세 가지를 소개해드립니다. 세 방법 모두 아래의 결과를 만듭니다.
방법 1 - padding 속성 이용하기
바깥쪽 요소에 padding 속성을 추가해서 세로 정렬을 가운데로 할 수 있습니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS | Coding Factory</title>
<style>
.a {
border: 1px solid #444444;
width: 500px;
padding: 100px 0px;
}
.b {
border: 1px solid #444444;
background-color: #444444;
}
h1 {
text-align: center;
color: #ffffff;
}
</style>
</head>
<body>
<div class="a">
<div class="b">
<h1>Lorem Ipsum Dolor</h1>
</div>
</div>
</body>
</html>방법 2 - margin 속성 이용하기
안쪽 요소에 margin 속성을 추가해서 세로 정렬을 가운데로 할 수 있습니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS | Coding Factory</title>
<style>
.a {
border: 1px solid #444444;
width: 500px;
}
.b {
border: 1px solid #444444;
background-color: #444444;
margin: 100px 0px;
}
h1 {
text-align: center;
color: #ffffff;
}
</style>
</head>
<body>
<div class="a">
<div class="b">
<h1>Lorem Ipsum Dolor</h1>
</div>
</div>
</body>
</html>방법 3 - display: table-cell 이용하기
바깥쪽 요소에
display: table-cell;을 추가하여 표의 셀처럼 만듭니다. 그리고
vertical-align: middle;을 추가하여 세로 정렬을 가운데로 만듭니다.
위 방법들과는 다르게, 바깥쪽 요소의 높이(height)를 정해줘야 합니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS | Coding Factory</title>
<style>
.a {
border: 1px solid #444444;
width: 500px;
height: 300px;
display: table-cell;
vertical-align: middle;
}
.b {
border: 1px solid #444444;
background-color: #444444;
}
h1 {
text-align: center;
color: #ffffff;
}
</style>
</head>
<body>
<div class="a">
<div class="b">
<h1>Lorem Ipsum Dolor</h1>
</div>
</div>
</body>
</html>CSS3의 flexible box를 이용하면 쉽게 세로 가운데 정렬을 구현할 수 있습니다. 하지만 IE 11부터 지원한다는 문제가 있습니다.
참고
'WEB > CSS' 카테고리의 다른 글
| HTML5 number inputs – Comma and period as decimal marks (0) | 2018.01.24 |
|---|---|
| Select box dir (0) | 2018.01.24 |
| [CSS]크로스 브라우징 (0) | 2018.01.24 |
| CSS background Property ❮ PreviousComplete CSS Reference Next ❯ (0) | 2018.01.24 |
| [CSS]text-indent (0) | 2018.01.18 |