text-align : center / margin : 0 auto

css text-align:center / margin: 0 auto

 

● text-align (부모요소에 주는 속성)

블록요소에 text-align : center를 주면 블록요소 내 존재하는 text , inline, inline-block 요소가 블록 내에서 가운데 정렬됨.

 

 

● margin: 0 auto (자신에게 주는 속성)

 

block 요소 자체를 브라우저 화면 가운데 정렬 시켜준다.

단 width 값을 꼭 써줘야 함 (블록요소는 기본적으로 가로가 100%이기 때문에 가운데정렬 해봤자 변화가 없기 때문)

 

 

 

☆ 인라인 요소를 화면 가운데 정렬 시키는 방법

1) div 태그로 감싼 뒤, text-align : center 를 준다.

2) 인라인 요소를 블록요소로 변환 시킨 뒤 margin:0 auto를 준다.