Align

Table of contents

1. Horizontal & Vertical Align
   1. Center Align Elements
   2. Center Align Text
   3. Left and Right Align
   4. Center Vertically

Horizontal & Vertical Align

Center Align Elements

• margin: 0 auto;

  가운데 정렬

  ▸ block요소이고, width값이 있어야지 가능함

Center Align Text

• text-align: center;

  텍스트 중앙 정렬

  ▸ 안에 있는 텍스트와 이미지를 중앙정렬시킴

Left and Right Align

• position: absolute;

• float: left or right;

Center Vertically

• padding

  패딩으로 가운데로 미는것

• line-height

  • 한 줄일 경우 : line-height 값과 height값을 동일하게

  • 여러줄일 경우 : 아래 CSS 사용

        line-height: 1.5;
        display: inline-block;
        vertical-align: middle;
    

• position & transform

    부모
    position: relative; 
      
    자식 
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  

• Flexbox

  ▸ not supported in IE10 and earlier versions

    .center {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 200px;
    }