[html/CSS] div 가운데 정렬 하는법

자식 태그를 가운데 정렬하기 위해서는 부모와 자식 둘다 CSS 설정을 해야합니다.

 

우선 앞서 가시화 속성인 display 속성을 먼저 알아야하는데요, display 속성에는 block과 inline-block 속성이 있습니다.

 

• block
  
  • display 속성이 block으로 지정된 엘리먼트는 전후 줄바꿈이 들어가 다른 엘리먼트들을 다른 줄로 밀어내고 혼자 한 줄을 차지합니다. ex) div
• inline-block
  • display 속성이 inline으로 지정된 엘리먼트는 전후 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치됩니다.  ex) span

 

여러 엘리멘트를 한 부모안에 정렬하고 싶으면 inline-block을 써야겠죠??

 

 

부모태그를  outer , 자식(정렬해야하는 태그)를 inner로 지정하고 할게요!

 

가운데 정렬하는 법

.outer {
  text-align: center;
}

.inner {
  display: inline-block;
}

 

 

세로 정렬하는 법

.outer {
  height:250px;
  display: table-cell;
  vertical-align: middle;
}

.inner {
  display: inline-block;
}

 

 

포스트가 많이 짧죠?ㅎㅎㅎ

웹프 화이팅 하세요~~