소개

이미지와 문자의 가로 줄을 좋은 느낌으로 만들고 싶었으므로, 순서를 따라 시험해 보았을 때의 이미지도를 비망록으로 남겨 간다.

목표로서는 이런 느낌.

환경

※이하를 사용한다.
flexbox
bootstrap 4계

우선은 flexbox를 사용해 본다

style.css

.img-container{
  display:flex;/* flexbox */
}

index.html

<div class="img-container">
  <img src="img.png">
  文言
</div>

기본값은 가로로 정렬됩니다. img와 문언이 붙어 버립니다.

수평 방향으로 한가운데로 해본다.

style.css

.img-container{
  display:flex;/* flexbox */
  justify-content:center; /* 水平方向 */
}

index.html

<div class="img-container">
  <img src="img.png">
  文言
</div>

문언이 중간이 아니기 때문에 어떻게 든해야합니다.

수직 방향을 한가운데로 해본다

style.css

.img-container{
  display:flex;/* flexbox */
  justify-content:center; /* 水平方向 */
  align-items: center; /* 垂直方向 */
}

index.html

<div class="img-container">
  <img src="img.png">
  文言
</div>

이미지와 문자가 붙어 버리고 있다. 딱 붙어있다. 여백을 새기고 싶다.

여백을 열어 본다. (골)

style.css

.img-container{
  display:flex;/* flexbox */
  justify-content:center; /* 水平方向 */
  align-items: center; /* 垂直方向 */
}

index.html

<div class="img-container">
  <img class="mr-3" src="img.png">
  文言
</div>

bootstrap에서 mr-3을 사용하여 이미지의 오른쪽에 여백을 열어 보았습니다.