개요

이미지의 표시 위치를 제어하는 CSS의 구현에 대해서, 잡히 기재합니다.
(향후 자신의 비망록도 겸해.)

HTML/CSS

<div class="contents">
  <img class="image" width="128" height="128" src="image.png" />
</div>

.contents {
  width: 100%;
  height: 100vh;
  background-color: darkgray;
}

.image {
  /* ここに画像の表示位置をコントロールするCSSを書く */
}

CSS가 아무것도 맞지 않을 때의 표시는 이런 느낌으로 이미지가 왼쪽 상단에 표시됩니다.

.image {
  top: 0;
  bottom: 0;
  margin: auto 0;
  position: absolute;
}

.image {
  bottom: 0;
  position: absolute;
}

.image {
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  position: absolute;
}

.image {
  bottom: 0;
  right: 0;
  position: absolute;
}

.image {
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto 0;
  position: absolute;
}

.image {
  right: 0;
  position: absolute;
}

.image {
  left: 0;
  right: 0;
  margin: 0 auto;
  position: absolute;
}

.image {
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  position: absolute;
}

이 문제에 관하여(【HTML/CSS】화상의 표시 위치(상하 좌우 중앙)를 완벽하게 제어한다), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/RYO_nami/items/e39b8d6128ebdf37aefc

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다