부트 스트랩 용 컨테이너의 이미지를 중앙을 중앙으로 중앙으로 만드는 방법

개요 : Bootstrap을 사용하여 이미지를 중앙으로 중앙에있는 방법에는 여러 가지가 있습니다. 기본 방법 : MX-AUTO 클래스를 사용하여 수평으로 중심하십시오. IMG-Fluid 클래스를 사용하여 부모 컨테이너에 적응하십시오. D- 블록 클래스를 사용하여 이미지를 블록 레벨 요소 (수직 센터링)로 설정하십시오. 고급 방법 : Flexbox 레이아웃 : 정당화 컨텐츠 중심 및 정렬 중심 센터 속성을 사용하십시오. 그리드 레이아웃 : 장소 항목을 사용하십시오 : 중앙 속성. 모범 사례 : 불필요한 중첩 및 스타일을 피하십시오. 프로젝트에 가장 적합한 방법을 선택하십시오. 코드의 유지 관리 가능성에주의를 기울이고 흥분을 추구하기 위해 코드 품질을 희생하지 마십시오.

부트 스트랩은 이미지를 컨테이너에 중심으로합니다 : 둘 이상의 포즈

많은 친구들이 부트 스트랩 레이아웃을 사용할 때 그림의 중심 및 정렬 문제에 직면하게됩니다. 이 문제는 간단 해 보이지만 제대로 처리되지 않으면 모든 종류의 이상한 버그를 유발하기 쉽고 심지어 당신의 삶을 의심하게 할 수도 있습니다. 따라서 오늘 우리는 부트 스트랩을 우아하게 사용하여 컨테이너의 그림을 중앙에 놓고 일반적인 함정을 피하는 방법에 대해 깊이 논의 할 것입니다.

이 기사의 목표는 부트 스트랩 이미지의 다양한 기술을 가장 기본적인 사용에서 일부 고급 응용 프로그램에 이르기까지 다양한 기술 및 코드 스타일 모범 사례에 이르기까지 효율적이고 우아한 코드를 작성할 수 있도록하는 것입니다. 이 기사를 읽은 후에는 다양한 중심의 사진 장면을 쉽게 처리 할 수 ​​있으며 더 이상이 문제에 대해 걱정하지 않습니다.

가장 기본적인 개념부터 시작하겠습니다. 부트 스트랩의 핵심에는 일련의 클래스 이름을 통해 요소의 배열과 크기를 제어하는 ​​메쉬 시스템이 있습니다. 그림의 중심은 본질적으로 모 컨테이너의 그림의 수평 및 수직 위치를 제어합니다.

가장 쉬운 방법은 Bootstrap에서 제공하는 mx-auto 클래스를 사용하는 것입니다. 이 클래스를 사용하면 요소가 모 컨테이너의 수평 중앙에 위치 할 수 있습니다. 그러나 이것은 단지 수평 센터링 일 뿐이며 수직 센터링에는 다른 수단이 필요합니다.

 <code class="html"><div class="container"> <img class="img-fluid mx-auto d-block lazy" src="/static/imghw/default1.png" data-src="your-image.jpg" alt="Responsive image"> </div></code>

이 코드에서 img-fluid 클래스는 이미지 너비가있는 상위 컨테이너에 적응하고 mx-auto 클래스는 수평 중심을 구현하고 d-block 클래스는 이미지를 블록 레벨 요소로 설정하여 수직 센터링에 중요합니다.

그러나 이것은 가장 기본적인 사용법입니다. 컨테이너 높이가 고정되어 있거나 수직으로 중앙에 위치하려면 더 고급 기술이 필요합니다.

한 가지 방법은 Flexbox 레이아웃을 사용하는 것입니다. Bootstrap 4 이상에는 Flexbox가 내장되어 있습니다. 부모 컨테이너를 플렉스 컨테이너로 설정 한 다음 align-items: center 및 justify-content: center 특성을 사용하여 수평 및 수직 중심을 달성 할 수 있습니다.

 <code class="html"><div class="container d-flex justify-content-center align-items-center" style="height: 200px;"> <img class="img-fluid lazy" src="/static/imghw/default1.png" data-src="your-image.jpg" alt="Responsive image"> </div></code>

여기서 d-flex 컨테이너를 플렉스 컨테이너로 설정하고 justify-content-center 수평 중심을 구현하고 정렬 align-items-center 중심을 구현하고 height 속성은 컨테이너 높이를 설정합니다.

실제 상황에 따라 height 속성을 설정해야한다는 점에 유의해야합니다. 그렇지 않으면 세로 센터링 효과가 예상 레벨에 도달하지 못할 수 있습니다.

또 다른 방법은 그리드 레이아웃을 사용하는 것입니다. Bootstrap 4는 그리드 레이아웃도 지원합니다. 부모 컨테이너를 그리드 컨테이너로 설정 한 다음 place-items: center 특성을 사용하여 수평 및 수직 중심을 달성 할 수 있습니다.

 <code class="html"><div class="container d-grid justify-content-center align-items-center" style="height: 200px;"> <img class="img-fluid lazy" src="/static/imghw/default1.png" data-src="your-image.jpg" alt="Responsive image"> </div></code>

이것은 그리드 레이아웃을 사용한다는 점을 제외하고 Flexbox 방법과 유사합니다.

그렇다면 어떤 방법이 더 낫습니까? 특정 요구에 따라 다릅니다. Flexbox는 일반적으로 사용하기 쉽지만 더 복잡한 레이아웃을 처리 할 때 그리드 레이아웃이 더 유연 할 수 있습니다.

마지막으로 성능 및 코드 스타일 제안에 대해 이야기 해 봅시다. 불필요한 중첩을 피하고 적절한 클래스 이름을 사용하며 코드를 간결하고 읽기 쉽게 유지하십시오. 너무 많은 스타일은 페이지 로딩 속도에 영향을 줄 수 있으므로 장단점을 측정하십시오. 가장 좋은 방법은 프로젝트에 적합한 방법을 선택하는 것입니다. 코드의 유지 보수 가능성은 임시 쇼 오프보다 더 중요합니다. 소위 "고급"기술을 추구 할 때 코드 가독성과 유지 관리를 희생하지 마십시오. 명확하고 간결한 코드는 최고의 코드입니다.

위 내용은 부트 스트랩 용 컨테이너의 이미지를 중앙을 중앙으로 중앙으로 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!