이 글은 HTML과 CSS를 사용하여 문장, 문단, 문단을 담고 있는 박스 등을 사용자가 보기 좋게 정렬할 수 있는 방법에 대해 다루고 있습니다.
수평, 수직축 중앙 정렬을 다룬 두 가지의 방법에 대해 알아보겠습니다.
방법 - 1.
display : table // display : table-cell // vertical-align : middle
수직 정렬 방법에 대해 자세히 알아보기 전에 먼저 vertical-align 속성에 대해 살펴보겠습니다. vertical-align 속성은 수직 정렬 속성 중 하나의 속성입니다.
[ vertical-align 이란? ]
- 수직 정렬 방법을 지정하는 속성입니다.
- inline / inline-block 으로 배치한 요소의 세로 정렬 방법을 지정합니다.
vertical-align : baseline / top / bottom / middle / sub / super / text-top / text-bottom / 길이 값 / 백분율 값
( ※ block 요소를 가지고 있는 태그에는 적용 불가능 ) - 예외적으로 table-cell 에서 사용이 가능합니다. 사용할 경우 top, middle, bottom 등으로 정렬 가능합니다. 바로 아래의 예시를 살펴보겠습니다.
[ vertical-align 이란? ]에서 2번 내용을 보면 block 요소를 가지고 있는 태그에는 적용이 불가능하다고 명시되어 있습니다.
하지만 vertical-align을 사용해 block 요소를 정렬할 수 있습니다. 다음 예시를 살펴보겠습니다.
위의 예시의 경우, 부모인 container 클래스와 자식인 wrapper 클래스로 이루어져 있습니다. 참고로 <div> 태그는 block 요소입니다. block 요소를 가지고 있는 두 개의 클래스를 CSS를 통해 수직 중앙 정렬해 보겠습니다.
display : table // display : table-cell // vertical-align : middle
display : table 과 display : table-cell // vertical-align : middle 을 이용하는 방법입니다. <table> 태그를 사용하지 않고 display : table 스타일을 이용하여 table을 만들고 cell을 만드는 것입니다.
먼저 container 클래스에 display : table; 스타일을 줌으로써 하나의 table이 형성됩니다.여기에 자식 wrapper 클래스에 display : table-cell 과 vertical-align : middle을 사용함으로써 수직 중앙정렬을 할 수 있습니다.
여기서 중요한 점은 부모 클래스에 display : table , 자식 클래스에 display : table-cell과 vertical-align : middle이라는 공식을 지켜야합니다. 그래야 본인이 원하는 수직축에 중앙정렬을 할 수 있습니다.
만약 top, bottom에 정렬하고 싶다면, vertical-align 속성에서 속성값을 middle에서 원하는 값으로 변경해주면 됩니다
추가로 수평 중앙정렬을 하고 싶은 경우, 아래의 예시를 살펴보겠습니다.
HTML 예시를 살펴보면 <h1>과 <p> 태그는 블록요소이긴 하지만 텍스트를 다루는 태그입니다. 그리고 text-align은 오직 텍스트 요소에 적용할 수 있는 정렬 속성입니다. 따라서 text-align : center를 container 클래스 혹은 wrapper 클래스에 적용하면 손쉽게 수평 중앙정렬이 가능해집니다.
다음 예시는 텍스트 요소가 아닌 블록 요소를 수평 중앙 정렬하는 방법입니다. 예시를 살펴보면 <h1>, <p> 텍스트 태그 대신 <div> 블록태그인 box 클래스를 넣었습니다.
블록 요소인 box 클래스에 margin : auto를 사용해줌으로써 상,하단 margin은 0 | 좌, 우 margin은 auto가 됩니다. 좌우 값이 auto가 되면서 자동으로 좌우 margin 값을 똑같이 맞추게 되고 중앙정렬이 된 것처럼 보이게 됩니다.
위와 같은 방법으로 블록요소를 margin 을 사용해 수평 중앙 정렬이 가능해집니다.
방법 - 2.
display : flex / display : inline-flex / align-items : center / justify-content : center
flex에 대해 알고있다는 가정하에 설명을 하겠습니다.
다음은 display : flex를 활용하여 교차축 중앙 정렬하는 예시입니다.
부모 클래스인 container 에 display: flex 혹은 display : inline-flex 를 적용하고 align-items : center를 사용하면 손쉽게 교차축 중앙 정렬이 가능합니다. 그리고 주축 중앙 정렬을 하려면 justify-content : center 를 사용하여 주축 중앙 정렬도 쉽게 가능합니다.
flex를 사용해 정렬을 할 때 필요한 요소는 모두 부모에 적용되어야 한다는 것을 명심하시기 바랍니다.
지금까지 두 가지의 수평 / 수직 중앙 정렬 방법에 대해 알아보았습니다. 위의 두 가지의 방법 중 어느 하나가 더 쉽고 편리한 방법이라고 단정 지을 수 없습니다. 본인의 상황에 맞게 알맞은 방법을 선택하여 적용하는 것이 가장 좋은 방법일 것입니다.
