[Github Blog] 이미지 가운데 정렬

✅ 기본 상태

Chirpy 테마에서 포스트에 이미지를 삽입하면 자동으로 페이지 넓이에 맞춰 보여준다. 하지만 이미지 크기를 줄였을 경우, 어떤 방법을 써도 이미지가 가운데 정렬이 되지 않고 좌측정렬이 되는 것을 확인할 수 있었다.

✅ 구현 방법

나는 이미지 사이즈를 작게 줄였을 경우 가운데 정렬이 되기를 원해서 찾아보던 중, Chirpy 에서는 이미지가 flex 속성으로 되어있다는 것을 확인했다. HTML, CSS를 잘 몰라서.. 구글링을 통해 가운데 flex 속성에서 가운데 정렬을 하려면 justify-content: center;를 추가하면 된다는 것을 확인했다.

🗒️ _sass/addon/commons.scss

_sass/addon/commons.scss의 .img-link 부분을 수정하면 된다.

.img-link {
  color: transparent;
  display: inline-flex;
}

기존 위의 코드에서 justify-content: center;만 추가해주면 된다.

.img-link {
  color: transparent;
  display: inline-flex;
  justify-content: center;
}

---

➕➕ 추가 작성

++ 75% 50% 등으로 줄이는건 Chirpy 테마에서 구현해놓은 걸 사용하면 가운데 정렬이 됨!

이미지 뒤에 {: .w-50}과 같이 하면 width가 50%로 줄어들고 가운데 정렬이 가능함

지정되어 있는 값만 가능한 것 같다.

• 75%, 50% 등

![image](/assets/posts/미모티콘.png){: .w-50}

예시 결과