6. 위치 속성 CSS - 정렬

• 수평 정렬

1. margin

2. text-align

3. position

4. float

• 수직 정렬

1. padding

2. line-height

3. position & transform

---

수평정렬 - 가운데정렬

Margin

• display 가 block인 Element에 width가 설정되어있는 경우 가운데 정렬 시 margin을 auto로 설정
• Image의 경우 display를 block으로 설정 후 가운데 정렬 시 margin-left, margin-right auto로 설정

See the Pen align - margin by zakelstorm (@zakelstorm) on CodePen.

Text-align (for text inside)

• Text Element 가운데 정렬 시 text-align:center로 설정 

See the Pen align-text-align by zakelstorm (@zakelstorm) on CodePen.

---

수평정렬 - 좌우정렬

Position

• position : absolute으로 설정 후 right 또는 left값을 0으로 설정 시 좌/우쪽 정렬을 할 수 있다.

Float

• float :right; 또는 float:left; 속성을 통해 좌/우측 정렬할 수 있다.
  • container보다 클 경우 밖으로 overflow되어 보이는데 이는 clearfix hack(부모가 다시 자식요소를 감쌀 수 있게 float 초기화하는 기법)을 통해 해결 할 수 있다.

  See the Pen align-float & clearfix by zakelstorm (@zakelstorm) on CodePen.

---

수직정렬 - 가운데정렬

Padding

• padding 값으로 top,bottom에 여유공간을 적당히 설정 (일종의 노가다)

Height & Line-height (for text inside)

• text를 세로 가운데 정렬하는데 사용하며 height와 line-height를 동일하게 설정.

        ※ 단, text의 개행이 발생하면 가운데 정렬을 보장하지 않는다

See the Pen align-height & line-height by zakelstorm (@zakelstorm) on CodePen.

 

Position & Transform

• position: absolute; top:50%; transform: translate(0, -50%) (height의 50% 만큼 위로 이동) 의 조합으로 설정

See the Pen align-position & transform by zakelstorm (@zakelstorm) on CodePen.

---

수직정렬 - 상하정렬

Position 

• position absolute; top 또는 bottom 값을 0 으로 설정 시 상/하 정렬을 할 수 있다.