부트스트랩 반응형 레이아웃 이미지를 중앙에 배치하는 방법

부트스트랩 프레임워크는 특히 이미지의 경우 반응형 웹사이트(또는 반응형 웹페이지 레이아웃)를 만드는 데 매우 편리합니다. 반응성을 달성하기 위해 CSS 클래스 .img-반응성을 사용할 수 있습니다(화면에 따라 자동으로 크기가 조정됩니다. 이 방법으로 이해하겠습니다). HTML 태그를 사용하는 것처럼 한 줄의 코드가 구현되므로 논리를 고려할 필요가 없습니다.

다음과 같습니다. (권장 학습: Bootstrap 비디오 튜토리얼)

class=”img-responsive”

반응형 이미지를 중앙에 배치하는 방법은 무엇입니까?

웹페이지 제작에서 사진 중앙 정렬이 자주 사용되는데, 반응형 사진을 중앙 정렬하는 방법은 무엇일까요? 또한 매우 간단합니다. CSS 클래스 .center-block을 사용하면 됩니다. 코드는 다음과 같습니다:

class=”img-responsive center-block”

이 코드 줄은 이미지를 반응형으로 만들고 중앙에 배치합니다. 참 쉽죠!

하지만 문제는 생기겠죠!

1. Bootstrap에서 일반적으로 사용되는 .text-center 클래스는 어떻습니까(반응형 이미지를 중앙에 배치할 수 있습니까?)

답은 다음과 같습니다. 일반적으로 .text-center 클래스는 텍스트를 중앙에 배치하는 데 사용됩니다. 이는 비반응형 이미지에는 작동하지만 반응형 이미지에는 작동하지 않습니다.

2. .center-block 클래스의 위치를 ​​변경하면 반응형 이미지의 중앙 배치에 영향을 미치나요?

답은: 그렇습니다.

왜요?

너무 많은 질문을 하지 마세요. 위의 빨간색으로 표시된 코드는 정확하고 표준입니다. 본 페이지를 중심으로 반응형 이미지의 핵심 기술을 모아 웹사이트 제작 시 필요할 때 복사할 수 있습니다.

Bootstrap과 관련된 더 많은 기술 기사를 보려면 Bootstrap Tutorial 칼럼을 방문하여 알아보세요!

위 내용은 부트스트랩 반응형 레이아웃 이미지를 중앙에 배치하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!