CSS에서 자른 이미지를 가로로 가운데에 맞추는 방법은 무엇입니까?

CSS를 사용하여 이미지를 가로 중앙에 배치

웹 페이지에 이미지를 표시할 때 이미지를 중앙에 가로로 정렬하는 것이 바람직한 경우가 많습니다. 그러나 일부만 표시하기 위해 이미지를 자르면 이 프로세스가 복잡해질 수 있습니다.

제공된 HTML 코드에서 클립을 사용하여 이미지를 자르지만 자른 이미지를 중앙에 맞추는 데 어려움이 있습니다. 문제에 대한 해결책은 다음과 같습니다.

해결책:

잘린 이미지를 가로로 가운데에 맞추려면 margin-left 및 margin-right CSS 속성을 사용할 수 있습니다. 업데이트된 코드는 다음과 같습니다.

<code class="css">.center img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}</code>

중앙에 배치할 이미지에 class="center" 속성을 추가하세요.

<code class="html"><div id="loading" class="loading-invisible">
  <img class="loading center" src="logo.png">
</div></code>

설명:

• display: block 속성은 이미지가 상위 요소의 전체 너비를 차지하도록 보장합니다.
• margin-left 및 margin-right: auto 속성은 왼쪽 및 오른쪽 여백을 "로 설정합니다. 자동'은 이미지 주위에 남은 공간을 자동으로 균등하게 분배하여 효과적으로 중앙에 배치합니다.

위 내용은 CSS에서 자른 이미지를 가로로 가운데에 맞추는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!