주의사항

인라인 요소를(블록 요소로 바꾸지 않고) 가로 가운데 정렬 시키기 위해서는 부모 요소에게 text-align: center

 

vertical-align 속성은 인라인 또는 인라인 블록 요소에 적용된다. 

부모요소에 inline-block 속성에 세로 길이가 100%인 요소를 만들고 해당 요소를 vertical-align: middle을 하면 더 완전하게 세로 정렬을 가운데로 할 수 있다. 

 

주의사항 

어떤 요소에 height: 100%;를 설정하기 위해서는 부모의 height가 설정되어 있어야 합니다. 위 경우에는 .helper의 부모인 .container에 height가 설정되어 있었기 때문에 가능했던 것이다.

.info를 인라인 블록으로 설정해주면, line-height 속성을 활용해볼 수도 있습니다. 부모인 .container에 height와 동일한 line-height를 줘보세요.

line-height 속성은 자식들에게 상속되기 때문에 .info에는 line-height: normal;을 꼭 써주셔야 합니다!

 

 

 

display 속성의 값이 부모태그가 table이고, 자식 태그가 table-cell 이면 표와 같이 일렬로 적용된다.

화면이 클 때는 table, 작을 때는 block으로 반응형 처리를 수행할 수 있도록 할 수 있다.