HTML div 요소의 자식요소를 가운데 정렬하는 방법
HTML에서 자식요소를 가운데 정렬하는 3가지 방법입니다.
각 속성은 레이아웃에 따라 다르게 적용되니 상황에 맞는 방법을 활용해 보세요.
- margin
- text-align
- flexbox
부모 div(outer)와 자식 div(inner)가 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
.outer {
width: 300px;
height: 300px;
background: #3c40c6;
}
.inner {
width: 100px;
height: 100px;
background: #ff5e57;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner"></div>
</div>
</body>
</html>
1. margin
수평 가운데정렬을 위한 가장 간단한 방법입니다.
margin 속성으로 요소의 상하좌우 여백을 지정하면서 요소를 정렬할 수 있습니다.
구문 - 전달하는 인자의 개수에 각각 다음과 같이 적용됩니다.
/* 네 면 모두 적용 */
margin: 1em;
margin: -3px;
/* 세로방향 | 가로방향 */
margin: 5% auto;
/* 위 | 가로방향 | 아래 */
margin: 1em auto 2em;
/* 위 | 오른쪽 | 아래 | 왼쪽 */
margin: 2px 1em 0 auto;
인자를 2개 전달하는 두 번째 방법을 사용하겠습니다. inner 클래스를 다음과 같이 수정합니다.
.inner {
width: 400px;
height: 400px;
background: #ff5e57;
margin: 0 auto;
}
상하에는 margin 0이 적용되었고,
좌우에는 auto로 설정되면서 부모요소와 자식요소 사이에 있는 수평방향 여백이 좌, 우에 동일하게 나뉘면서 가운데 정렬이 되었습니다.
이 방법은 부모요소는 건드리지 않고 자식요소의 속성만으로 가운데 정렬되기 때문에 간편합니다.
참고로 수직정렬은 auto를 설정해도 자동으로 간격이 배분되지 않고 각각 0으로 입력됩니다.
즉, 이 방법을 통해서는 수평정렬만 가능합니다.
W3C spec
If “margin-top” or “margin-bottom” is “auto”, their used value is 0
2. text-align
text-align 속성을 아래와 같이 활용하면 자식요소를 가운데정렬 할 수 있지만, 이 방법은 권장되지 않습니다.
이유는 아래에서 설명합니다.
.outer {
width: 800px;
height: 800px;
background: #3c40c6;
text-align: center;
}
.inner {
width: 400px;
height: 400px;
background: #ff5e57;
display: inline-block;
}
outer에 text-align 속성을 center로 설정하면 자식요소가 중앙으로 배치됩니다. 단, 자식요소는 코드에서와 같이 display 속성을 inline-block으로 설정해줘야 합니다.
그런데 자식요소를 inline-block으로 설정하면 요소의 역할(컨텐츠 or 레이아웃)이 명확해지지 않기 때문에 이 방법은 권장되지 않습니다. 그래서 text-align은 자식 div요소가 아닌 요소 내의 컨텐츠 자체(텍스트)를 정렬하는 데에만 주로 사용합니다.
단, 부모-자식요소 간의 관계에서 사용하는 경우가 있는데, 아래와 같이 자식요소가 부모요소의 text-align 속성을 상속하여 그 내부의 컨텐츠를 일관성 있게 정렬하는 데에 사용될 수 있습니다.
<div class="outer">
<div class="inner">Hi</div>
<div class="inner">Hi</div>
<div class="inner">Hi</div>
</div>.outer {
width: 300px;
height: 300px;
background: #3c40c6;
text-align: center;
}
.inner {
width: 100px;
height: 100px;
background: #ff5e57;
}
inner div가 outer div의 text-align 속성을 상속받으면서 Hi라는 텍스트가 모두 일관성 있게 가운데정렬 되었습니다.
3. vertical-align
vertical-align 속성은 text-align 속성과 같은 메커니즘으로 수직정렬을 수행합니다.
3. flexbox
자식요소를 정렬하는 가장 확실한 방법입니다. 수평, 수직정렬 모두 가능합니다.
<div class="outer">
<div class="inner"></div>
</div>
부모 요소에 flexbox를 적용해 줍니다.
.outer {
width: 300px;
height: 300px;
background: #3c40c6;
display: flex;
}
justify-content 속성으로 수평정렬을, align-items 속성으로 수직정렬을 적용할 수 있습니다.
.outer {
width: 300px;
height: 300px;
background: #3c40c6;
display: flex;
justify-content: center;
align-items: center;
}
flexbox의 정렬에 대한 자세한 설명은 아래 글을 참고해 주세요
2023.12.28 - [HTML, CSS] flexbox(display: flex) 총정리
[HTML, CSS] flexbox(display: flex) 총정리
flex는 grid만큼 다양한 기능을 가지고 있지는 않지만, 대부분의 레이아웃은 flexbox의 조합만으로도 충분히 구현이 가능합니다. grid layout에 관해서는 아래 깔끔하게 잘 정리된 글을 링크로 남깁니
codingbroker.tistory.com
margin - CSS: Cascading Style Sheets | MDN
margin CSS 속성은 요소의 네 방향 바깥 여백 영역을 설정합니다. margin-top, margin-right, margin-bottom, margin-left의 단축 속성입니다.
developer.mozilla.org
text-align - CSS: Cascading Style Sheets | MDN
CSS text-align 속성은 블록 요소나 표의 칸 상자의 가로 정렬을 설정합니다. 즉 vertical-align과 동일하나 세로가 아닌 가로 방향으로 동작합니다.
developer.mozilla.org
vertical-align - CSS: Cascading Style Sheets | MDN
vertical-align CSS 속성은 inline 또는 table-cell box에서의 수직 정렬을 지정합니다.
developer.mozilla.org
W3C sepc - Visual formatting model details
Visual formatting model details
The position and size of an element's box(es) are sometimes calculated relative to a certain rectangle, called the containing block of the element. The containing block of an element is defined as follows: In paged media, an absolutely positioned element i
www.w3.org
'프론트엔드 HTML CSS JAVASCRIPT' 카테고리의 다른 글
| [HTML, JAVASCRIPT, CSS] 마우스 오버 시 HTML 요소(이미지, div 등) 확대(zoomIn) 하는 방법. 옆에 요소 안밀려나게/밀려나게 (3) | 2019.08.18 |
|---|---|
| [HTML, JAVASCRIPT] fetch를 사용하여 데이터 요청 후 화면에 적용하는 방법 ajax (4) | 2019.08.17 |
| [HTML] video 태그로 동영상 플레이어 만드는 방법 (0) | 2019.08.14 |
| [HTML, CSS] opacity로 요소, 배경화면 투명하게(흐리게)하는 방법, 자식 요소에 같이 적용되는 문제 (1) | 2019.08.14 |
| [HTML, CSS] div 요소를 전체화면으로 설정하기, 끝부분 적용안되는 문제, css reset (4) | 2019.08.12 |
