Div에서 이미지 센터를 가로로 만드는 방법

Bootstrap div에서 이미지를 중앙에 중앙 선택 : 최상의 선택 : Old Projects에는 Flexbox (D-Flex 및 정당화 컨텐츠 중심 클래스 추가)를 사용하십시오 : 텍스트-알림을 사용하고 (IMG 태그를 인라인 블록으로 설정하고 텍스트-정렬 : 센터;)를 사용하십시오.

부트 스트랩의 div : 수평 중심을위한 비밀에서 사진을 안정적으로 만듭니다.

많은 학생들 이이 문제를 겪었습니다. 그림은 부트 스트랩의 div에 중앙에 걸릴 수 없으며, 그것을 보는 것이 불편하다고 느낍니다. 실제로 솔루션은 그렇게 복잡하지 않습니다. 핵심은 부트 스트랩의 레이아웃 메커니즘과 일부 CSS 팁을 이해하는 것입니다. 이 기사를 사용하면 단계별로 완료 할 수있게되어 사진 중심의 문제를 완전히 제거 할 수 있으며 코드 경로는 지금부터 매우 매끄 럽습니다. 읽은 후에는 다양한 방법을 마스터하고 실제 조건에 따라 최적의 솔루션을 선택할 수 있습니다.

먼저 부트 스트랩의 기본 사항을 검토합시다. Bootstrap은 Flexbox 및 그리드 시스템을 사용하여 레이아웃을 사용하며 둘 다 쉽게 중앙에 위치 할 수 있습니다. Flexbox는 다양한 시나리오에 더 유연하고 적합하지만 그리드 시스템은 복잡한 페이지 레이아웃에 더 적합합니다.

가장 일반적으로 사용되는 Flexbox부터 시작하겠습니다. DIV에서 이미지 센터를 가로로 만들려면 d-flex 와 justify-content-center 두 클래스 만 추가하면 부모 DIV에만 추가하면됩니다. d-flex Flexbox 레이아웃을 활성화 justify-content-center 하위 요소 (즉, 그림)를 수평으로 정렬합니다.

 <code class="html"><div class="d-flex justify-content-center"> <img src="/static/imghwm/default1.png" data-src="your-image.jpg" class="lazy" alt="Your Image"> </div></code>

그렇게 간단합니까? 네, 그게 간단합니다! 물론 이미지가 너무 커지고 컨테이너를 깨지 않도록 이미지의 max-width 을 설정해야 할 수도 있습니다.

 <code class="html"><div class="d-flex justify-content-center"> <img src="/static/imghwm/default1.png" data-src="your-image.jpg" class="lazy" alt="Your Image"   style="max-width:90%"> </div></code>

이것은 가장 기본적인 사용법입니다. 이미지의 높이가 고정되지 않은 경우 수직 중앙에도 필요할 수도 있습니다. 이 시점에서는 align-items-center 클래스를 추가 할 수 있습니다. 이 수업은 수직 방향으로 자식 요소를 중심으로합니다.

 <code class="html"><div class="d-flex justify-content-center align-items-center"> <img src="/static/imghwm/default1.png" data-src="your-image.jpg" class="lazy" alt="Your Image"   style="max-width:90%"> </div></code>

완벽한! 이제 그림이 아무리 크거나 작더라도 Div에서 수평 및 수직으로 꾸준히 중앙에있을 수 있습니다.

그러나 이것이 유일한 방법은 아닙니다. 프로젝트가 오래되었거나 어떤 이유로 Flexbox를 사용하지 않으려면 텍스트-정렬 속성을 사용할 수도 있습니다. 그러나이 방법은 인라인 요소에만 적용 가능하므로 IMG 태그를 display: inline-block; .

 <code class="html"><div style="text-align: center;"> <img src="/static/imghwm/default1.png" data-src="your-image.jpg" class="lazy" alt="Your Image"   style="max-width:90%"> </div></code>

이 방법은 더 전통적이며 복잡한 레이아웃을 처리 할 때 Flexbox만큼 편리하지 않습니다.

가능한 문제에 대해 이야기합시다. 예를 들어, 그림의 너비와 높이 비율이 잘못되어 불만족스러운 중심 효과가 발생합니다. 현재 이미지 자체의 크기를 조정하거나 CSS의 object-fit 속성을 사용하여 이미지의 표시를 제어해야 할 수도 있습니다.

또한 DIV에 패딩 또는 마진이있는 경우 센터링 효과에도 영향을 줄 수도 있습니다. CSS 스타일을 다시 확인하여 불필요한 스타일 간섭이 없는지 확인하십시오.

요컨대, 부트 스트랩의 div에서 그림을 중심으로하는 방법에는 여러 가지가 있습니다. 선택할 방법은 특정 요구 사항과 프로젝트 상황에 따라 다릅니다. Flexbox는 간단하고 효율적이며 호환성이 우수하기 때문에 가장 권장되는 방법입니다. 그러나 다양한 방법의 장점과 단점을 이해함으로써 실제 개발에서 최선의 선택을 할 수 있습니다. 코드의 가독성과 유지 관리도 중요하므로 코드를 간결하고 명확하게 유지하십시오. 이 기사가 사진을 중심하는 문제를 쉽게 해결하는 데 도움이되기를 바랍니다. 행복한 프로그래밍을 기원합니다!

위 내용은 Div에서 이미지 센터를 가로로 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!