부트 스트랩 이미지를 위치로 중심으로 할 수 있습니까?

부트 스트랩 그림에는 다양한 중심 방법이 있으며 선택은 요구 사항 및 프로젝트 구조에 따라 다릅니다. 수평으로 중심하는 가장 쉬운 방법은 Bootstrap의 MX-Auto 클래스를 사용하는 것이며, 수직 센터링은 Flexbox (D-Flex Align-Items-Center) 또는 그리드 레이아웃을 사용할 수 있습니다. 위치를 피하는 것이 좋습니다 : 절대 및 다른 부품의 영향을받지 않는 한 절대 및 변환. 성능 최적화 측면에서 SRCSET을 사용하여 다양한 크기와 압축 사진의 사진을 제공하여 파일 크기를 줄이는 것이 좋습니다.

부트 스트랩 이미지가 중앙에 위치하고 position 속성을 사용 하시겠습니까? 물론, 그러나 "캔"과 "모범 사례"사이에는 차이가 있습니다.

이 기사에서는 부트 스트랩 사진의 중앙에있는 것들에 대해 이야기하고, 왜 단순히 position 사용하는 것이 때때로 최상의 솔루션이 아니며, 구덩이에 빠지게 할 수도 있습니다. 읽은 후에는 여러 가지 방법을 마스터 할뿐만 아니라 그 뒤에있는 원칙을 이해하고보다 효율적이고 우아한 코드를 작성할 수 있습니다.

기본 사항에 대해 먼저 이야기 해 봅시다. 부트 스트랩의 그리드 시스템은 레이아웃의 초석입니다. position: absolute; 왼쪽 left: 50%; transform: translateX(-50%); 이미지를 중심으로하는 문제를 직접 해결할 수 있지만, 실제로 가능하지만이 방법은 부트 스트랩의 프레임 워크에서 벗어나 반응 형 레이아웃 특성을 파괴합니다. 이 방법은 페이지가 복잡한 경우 또는 크기가 다른 화면을 중심으로 유지 해야하는 경우 유지 관리가 매우 고통 스러울 수 있습니다. 부트 스트랩에서 제공하는 더 우아하고 강력한 솔루션을 무시합니다.

그렇다면 부트 스트랩이 제공하는 가장 우아한 방법은 무엇입니까?

가장 간단하고 가장 직접적인 것은 부트 스트랩 클래스를 사용하는 것입니다. 예를 들어, mx-auto 클래스는 요소를 가로로 중심 할 수 있습니다. 그림이 들어있는 컨테이너에 추가하여 그림을 가로로 중앙에 두십시오.

 <code class="html"><div class="mx-auto" style="width: 200px;"> <img src="/static/imghwm/default1.png" data-src="your-image.jpg" class="lazy" alt="부트 스트랩 이미지를 위치로 중심으로 할 수 있습니까?"> </div></code>

이것은 부트 스트랩의 원칙과 매우 일치하는 연습입니다. 코드는 간결하고 이해하기 쉽고 유지하기 쉽습니다. 그러나 수평 센터링 만 달성합니다. 수직 센터링은 어떻습니까?

수직 센터링은 상황을 약간 더 복잡하게 만듭니다. Flexbox 또는 그리드 레이아웃을 사용하여이를 달성 할 수 있습니다. Flexbox는 가볍고 간단한 수직 센터링에 적합한 선택입니다.

 <code class="html"><div class="d-flex align-items-center" style="height: 200px;"> <img src="/static/imghwm/default1.png" data-src="your-image.jpg" class="lazy" alt="부트 스트랩 이미지를 위치로 중심으로 할 수 있습니까?"> </div></code>

d-flex Flexbox 레이아웃을 활성화하고 align-items-center 프로젝트를 수직으로 정렬합니다. 컨테이너의 height 설정해야한다는 점에 유의해야합니다. 그렇지 않으면 수직 센터링이 적용되지 않습니다.

그리드 레이아웃은 수직 센터링을 달성 할 수 있지만 복잡한 레이아웃 시나리오에 더 적합합니다. 레이아웃이 이미 그리드를 사용하는 경우 그리드를 사용하여 이미지를 중앙을 중심으로하는 것이 더 자연 스럽습니다.

transform 추가하는 position: absolute; 에 대해서는 부트 스트랩 프로젝트에서 가능한 한 사용하는 것을 피하는 것이 좋습니다. 페이지의 다른 부분에 영향을 미치지 않을 것이라고 확신하지 않고 유지 보수 문제를 처리 할 수 ​​있습니다. 코드의 유지 관리는 임시 편의성과 속도보다 훨씬 중요합니다.

마지막으로 성능 최적화에 대해. 큰 이미지의 경우 srcset 속성을 사용하여 다양한 화면 해상도에 맞는 다양한 크기의 그림을 제공하고 로딩 속도를 향상시켜야합니다. 이것은 사소한 픽셀 수준의 차이가 아닌 실제 성능 최적화입니다. 사진을 압축하고 파일 크기를 줄이는 것을 잊지 마십시오. 이것은 왕입니다.

요컨대, 부트 스트랩 사진을 중앙으로하는 방법에는 여러 가지가 있습니다. 선택할 방법은 특정 요구 사항과 프로젝트 구조에 따라 다릅니다. 그러나 부트 스트랩의 디자인 철학과 더 일치하고 유지하기가 더 쉬운 부트 스트랩과 함께 제공되는 클래스 및 레이아웃 체계에 우선 순위를 두어야합니다. 기본 사항을 놓치지 말고 소위 기술을 추구하십시오. 단순성과 효율성이 모범 사례입니다.

위 내용은 부트 스트랩 이미지를 위치로 중심으로 할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!