부트 스트랩 사진을 중심하는 방법은 무엇입니까?

부트 스트랩에서 이미지를 중심하는 방법에는 다음이 포함됩니다 : Flexbox 사용 : 상위 요소는 D-Flex를 설정하고 정당화-컨텐츠 중심을 수평으로 중심으로 설정하고, 중심적으로 정렬하여 수직으로 중심적입니다. 그리드 레이아웃 사용 : 부모 요소의 D- 그리드 및 높이를 설정하고 내부 DIV의 P-2를 설정하여 이미지의 여백을 추가하십시오. 절대 포지셔닝 및 마진 : 이미지 설정 위치 : 절대, 마진을 사용하여 위치를 조정하고 변환 : 번역 (-50%, -50%)을 상위 요소로 이동시키기 위해 변환 (-50%, -50%)

부트 스트랩 사진 중심 : 둘 이상의 포즈

부트 스트랩 사진은 중앙에 있으며 간단하게 들리지만 실제로는 CSS의 "재미있는"을 경험할 수 있습니다. 많은 초보자들은 매우 간단하게 생각할 것이고, text-center 사용하여 마무리하지만 실제로 이것은 많은 방법 중 하나 일 뿐이며 항상 가장 적합한 것은 아닙니다. 이 기사의 목적은 부트 스트랩 사진을 센터링하는 다양한 방법과 그 뒤에있는 원리를 깊이 이해하여 더 이상 단순한 피상적 현상으로 혼동되지 않도록하는 것입니다. 읽은 후에는 다양한 시나리오에 따라 최적의 솔루션을 선택하고 우아하고 효율적인 코드를 작성할 수 있습니다.

기본부터 시작하겠습니다. Bootstrap은 Flexbox 및 그리드 시스템을 사용하여 레이아웃을 사용하며, 그림을 중심으로하는 것은 본질적으로 이러한 시스템을 사용하여 요소의 위치를 ​​제어합니다. 이것을 이해하는 것이 중요합니다. 불필요한 문제를 많이 피하는 데 도움이 될 수 있습니다.

가장 일반적이고 오류가 발생하기 쉬운 text-center 으로 시작하겠습니다. text-center 텍스트 콘텐츠 만 수평으로 중심으로 할 수 있습니다. 그림의 경우 효과는 그림의 display 속성에 따라 다릅니다. 이미지가 인라인 요소 인 경우 수평으로 중심이되지만 수직으로 유지됩니다. 따라서 text-center 일반적으로 이미지를 중심으로하기에 충분하지 않습니다.

그렇다면 어떻게 우리는 어떻게 그림의 수평 및 수직 중심을 달성 할 수 있습니까? 많은 방법이 있습니다. 일반적으로 사용되는 몇 가지 방법을 살펴 보겠습니다.

방법 1 : Flexbox를 사용합니다

이것은 단순하고 효율적인 가장 권장되는 방법입니다. 부모 요소를 d-flex 및 justify-content-center (수평 센터) 및 align-items-center (수직 센터)으로 설정하십시오. 코드는 다음과 같습니다.

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

여기 height: 200px; 키인 상위 요소의 높이를 설정하면 수직 센터링이 적용되지 않습니다. Flexbox는 올바르게 작동하려면 명확한 높이가 필요합니다. 이 방법의 장점은 코드가 간단하고 이해하고 유지하기 쉽다는 것입니다. 단점은 부모 요소의 높이를 미리 알려야한다는 것입니다.

방법 2 : 그리드 레이아웃을 사용하십시오

레이아웃 자체가 그리드를 사용하는 경우 그리드를 사용하여 중앙을 중앙에 사용하는 것도 좋습니다. Flexbox와 마찬가지로 상위 요소의 속성을 설정해야합니다.

 <code class="html"><div class="d-grid gap-2" style="height: 200px;"> <div class="p-2"> <img src="/static/imghw/default1.png" data-src="your-image.jpg" class="lazy" alt="Your Image"> </div> </div></code>

여기서 d-grid 그리드 레이아웃을 가능하게하고 gap-2 셀 간격을 설정하고 p-2 이미지에 내부 마진을 추가합니다. 마찬가지로, 부모 요소의 높이도 중요합니다. 그리드 레이아웃은 Flexbox보다 강력하며보다 복잡한 레이아웃 시나리오에 적합합니다.

방법 3 : 절대 포지셔닝 및 마진

이것은 비교적 구식 방법이지만 때로는 매우 유용합니다. 이미지를 절대 포지셔닝으로 설정 한 다음 margin 사용하여 위치를 조정해야합니다.

 <code class="html"><div style="position: relative; height: 200px;"> <img src="/static/imghw/default1.png" data-src="your-image.jpg" class="lazy" alt="Your Image"   style="max-width:90%"> </div></code>

상위 요소는 position: relative 이며 이미지는 절대 포지셔닝으로 설정됩니다. transform: translate(-50%, -50%) 이미지의 중심점을 부모 요소의 중심점으로 이동합니다. 이 방법은 비교적 유연하지만 코드는 비교적 복잡하며 절대 포지셔닝을 이해하고 속성을 transform 해야합니다.

자주 묻는 질문과 구덩이

일관되지 않은 이미지 크기는 불만족스러운 중심 효과를 초래합니다. 이미지 크기가 고정되지 않은 경우 max-width: 100%; 또는 width: auto; height: auto; 이미지 크기를 제어하고 중심 효과를 보장합니다.

부모 요소 높이는 정의되지 않았습니다. Flexbox 및 그리드 레이아웃은 부모 요소가 올바르게 작동하기 위해 명확한 높이를 가지려면 수직 센터링이 실패합니다.

프로젝트에 적합한 방법을 선택하십시오. 소위 "모범 사례"를 맹목적으로 추구하지 말고 실제 조건에 따라 가장 적절한 방법을 선택하십시오. Flexbox는 일반적으로 단순하고 효율적인 첫 번째 선택입니다. 프로젝트가 이미 그리드를 사용하는 경우 그리드를 사용하는 것도 나쁘지 않습니다. 절대 포지셔닝 방법은 유연하지만 코드는 비교적 복잡하고 유지 보수 비용이 더 높습니다.

마지막으로, 코드의 가독성과 유지 가능성은 마찬가지로 중요하다는 것을 기억하십시오. 간결하고 이해하기 쉬운 방법을 선택하고 좋은 의견을 작성하여 코드를 쉽게 이해하고 유지 관리 할 수 ​​있도록하십시오. 소위 "기술"을 추구하여 코드의 가독성을 희생하지 마십시오. 이것은 큰 황소가되는 진정한 방법입니다.

위 내용은 부트 스트랩 사진을 중심하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!