CSS_img 중앙(center)정렬 하기 공부 (block, flex,text-align)

CSS를 하면 은근히 어려운 게 Img 중앙 정렬이었는데요.. 다양한 방법이 존재하는 것 같습니다.  중앙 정렬 자체가 좀 복잡한 것 같아요... 

 

TMI) 공부를 하다보면 img를 계속 불러오기도 귀찮고 해서 핀터레스트를 이용해서 주소 복사하여 연습합니다. 

제일 많이 사용하는것이 

display: block;

margin: auto;

이거나 

margin-right: auto;

margin-left: auto;

인 듯합니다. 잘 되고요. img에 직접 적용할 수 있죠. margin-right: auto; , margin-left: auto; 쪽이 검색하면 더 나오는 듯합니다. 

저는 정말 중앙 정렬하면 줄기차게 사용한게 flex인데.. 어렵긴 합니다. flex box라고 해서 box안에서 정렬을 하는 것이라 이해하면 좀 쉽더군요.(그게 그거지만..) 그러니까 img 자체로 flex가 정렬되지 않고 div안에 img를 만들고 div에서 flex로 정렬하는 거죠. 

다만 flex의 단점? 아닌 특징이라면 div내에 다른 요소가 있다면 바로 옆으로 정렬이 됩니다. flex의 기본 정렬이 row라고 하는군요. 

바로 img 옆에 p가 정렬되었습니다. 이러면 완전한 center가 될 수 없잖아요... 

그래서 flex-direction: column 으로 세로 정렬로 바꿉니다. img가 늘어났습니다. 

그렇다고 크기를 조정해도.. center가 되질 않네요.. justify-content가 먹히지 않습니다. 

대신 align-items: center 로 하니 center정렬이 잘됩니다. ~ 

심지어 크기 조정도 필요가 없습니다.  align-items는 flex-direction: column 설정되어 있지 않으면 중앙 정렬이 되지 않는군요.. flex 기본 정렬이 row라서 그런가 봅니다. 

크롬에서 img center 이렇게만 쳐도 나오는 곳의 또다른 방법으로는 <div>에 text-align:center 를 하면 img가 center로 옮겨지는 방법입니다. 오호.. 

같은 div에 있는 text 도 중앙정렬이 잘됩니다. 이거 좋은 방법 같아 보이는데... 

 

계속하다 보면 또 다른 문제점이 나오겠죠.