HTML에서 이미지 중앙을 중심하는 방법

인라인 이미지를 위해 부모의 중심을 사용하십시오. 2. 디스플레이 적용 : 블록 및 마진 : 신뢰할 수있는 수평 센터링을 위해 이미지에 자동; 3. 디스플레이 사용 : 정당화 컨텐츠로 플렉스 : 현대적이고 유연한 레이아웃의 센터; 4. 디스플레이 사용 : 장소 항목이있는 그리드 : 양방향으로 정확한 중심을위한 센터; 가장 좋은 방법은 레이아웃 요구 사항에 따라 다르며 마진 : 자동 및 Flexbox가 가장 일반적이며 감가 상각 된 HTML 속성을 피해야합니다.

HTML에서 이미지를 중심으로하는 것은 블록 내에서 (단락과 같은) 정렬하는지 또는 레이아웃 (예 : Flex 컨테이너 또는 그리드)에 위치하는지 여부에 따라 다릅니다. 가장 일반적이고 신뢰할 수있는 방법은 구식 HTML 속성이 아닌 CSS를 사용합니다. 다음은 몇 가지 효과적인 방법입니다.

1. text-align: center (인라인 또는 인라인 블록 요소 용)

이미지는 기본적으로 인라인이므로 text-align: center 에 부모 요소를 적용하여 컨테이너 내의 중앙에 있습니다.

 <div style = "text-align : center;">
  <img src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/175504472523649.jpeg"  class="lazy"  src = "image.jpg"alt = "중앙 이미지">
</div>

이것은 블로그 게시물이나 섹션에서 이미지를 중심으로하는 것과 같이 간단한 경우에 적합합니다. 이미지가 display: block 또는 다른 기술과 결합하지 않으면 작동하지 않습니다.

2. margin: auto display: block

이 방법은 이미지를 블록 레벨 요소로 취급하고 자동 마진을 사용하여 수평으로 중심으로합니다.

 <img src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/175504472627357.jpeg"  class="lazy"  src = "image.jpg"alt = "centered image"style = "display : block; margin : auto;">

이것은 가장 널리 사용되고 신뢰할 수있는 기술 중 하나입니다. 왼쪽 및 오른쪽 여백이 auto 으로 설정되면 브라우저는 사용 가능한 공간을 양쪽에 동일하게 배포하기 때문에 작동합니다.

참고 : 이미지가 display: block 이 작동하려면 블록이 필요합니다. 인라인 요소는 margin: auto 존중하지 않습니다.

3. Flexbox 사용 (현대 및 유연성)

컨테이너에 이미지를 감싸고 Flexbox를 사용하여 중앙을 중심으로하십시오. 이렇게하면 더 많은 제어 기능을 제공하며 반응 형 레이아웃에 적합합니다.

 <div style = "display : flex; 정당화-컨텐츠 : 센터;">
  <img src = "image.jpg"alt = "중앙 이미지">
</div>

• justify-content: center 중심은 이미지를 가로로 수평으로합니다.
• 키가 큰 용기 내에서 수직으로 중앙에있는 경우 align-items: center 추가 할 수도 있습니다.

Flexbox는 복잡한 레이아웃에 이상적이며 최신 브라우저에서 잘 지원됩니다.

4. CSS 그리드 사용

Flexbox와 유사하게 CSS 그리드는 이미지를 쉽게 중앙으로 중앙으로 센터 할 수 있습니다.

 <div style = "display : 그리드; 장소-항목 : 중심; 높이 : 200px;">
  <img src = "image.jpg"alt = "중앙 이미지">
</div>

• place-items: center 센터는 수평 및 수직으로 내용합니다.
• 정확한 레이아웃 제어가 필요할 때 유용합니다.

어떤 방법을 사용해야합니까?

• 간단한 경우 : margin: auto display: block .
• 최신 레이아웃 의 경우 : Flexbox를 사용하십시오 ( display: flex; justify-content: center ).
• 수직 수평 센터링 의 경우 : Flexbox 또는 그리드를 사용하십시오.
• <center></center> 또는 align="center" 와 같은 오래된 방법을 피하십시오.

기본적으로 이미지 자체에 관한 것이 아니라 컨테이너 또는 이미지의 디스플레이 동작을 어떻게 스타일링하는지에 관한 것입니다. 레이아웃 요구에 맞는 방법을 선택하십시오.

위 내용은 HTML에서 이미지 중앙을 중심하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!