HTML&CSS에서 배운 내용

Progate에서 HTML & CSS를 공부하고 있다면 요소의 중앙 정렬로 주저했습니다. 머리 속의 정리와 아웃풋의 연습이라는 의미로 기사를 써 봅니다.

요소의 가운데 정렬

이 요소들을(Progate 아이콘:img태그, 문장:p태그)


중앙을 옮기고 싶었다.


img 태그는 인라인 요소, p 태그는 블록 레벨 요소였을 것. 우선 margin:0 auto; 를 시도해 보지만, 변화 없음. . 결과적으로 text-align:center; 가운데에 정렬되었습니다.

여기서 한 가지 의문이있었습니다. margin 프로퍼티를 괴롭히고 img가 움직이지 않는 것은 알지만, p도 움직이지 않는 것은 왜? 확실히 중앙에 맞추고 싶은 대상이 인라인 요소라면 text-align, 블록 레벨 요소라면 margin을 만지면 좋을 것이다.

조사해 보았다

우선 배경색 바꾸어 블록의 범위 확인해 보았습니다.


뭔가 p 태그의 범위가 넓다. 조사해 보았을 때, 블록 레벨 요소의 폭은 width의 지정을 하지 않는 경우, 부모 요소와 친숙해지는 모양.

라는 것은, p 태그의 width를 지정하면 margin 따위 중앙에 전해지는?

이것이


중앙에 들렀다.


생각했던 대로, 움직여 주었습니다.