[html] 반응 형 이미지 정렬 센터 부트 스트랩 3

Bootstrap 3을 사용하여 카탈로그를 작성합니다. 태블릿에 표시 될 때 제품 이미지는 작은 크기 (500×500)와 브라우저에서 너비 767 픽셀로 인해보기 흉하게 보입니다. 화면 중앙에 이미지를 넣고 싶지만 어떤 이유로 든 할 수 없습니다. 문제 해결에 누가 도움이됩니까?

답변

Bootstrap v3.0.1 이상을 사용하는 경우이 솔루션을 대신 사용해야 합니다 . 사용자 정의 CSS로 Bootstrap의 스타일을 재정의하지 않고 대신 Bootstrap 기능을 사용합니다.

내 원래 답변은 후손에 대한 아래에 표시됩니다

이것은 유쾌하게 쉬운 수정입니다. .img-responsiveBootstrap에서 이미 설정 했기 때문에 이미지를 중앙에 배치하는 데 display: block사용할 수 있습니다 margin: 0 auto.

.product .img-responsive {
    margin: 0 auto;
}

답변

.center-blockTwitter Bootstrap 3 ( v3.0.1 이후 ) 에는 클래스가 있으므로 다음을 사용하십시오.

<img src="..." alt="..." class="img-responsive center-block" />

답변

center-block이미지에 클래스 만 추가하면 Bootstrap 4에서도 작동합니다.

<img src="..." alt="..." class="center-block" />

참고 : center-block경우에도 작동 img-responsive사용

답변

그냥 사용 .text-center하면 부트 스트랩 3 사용하는 경우 클래스를.

<div class="text-center">
    <img src="..." alt="..."/>
</div>

참고 : 이것은 img-responsive와 작동하지 않습니다

답변

이미지를 중앙에 배치하고 반응 형으로 만들어야합니다.

<img src="..." class="img-responsive" style="margin:0 auto;"/>

답변

나는 더 “추상적 인”분류를 제안 할 것이다. .img 응답 클래스와 함께 사용할 수있는 새 클래스 “img-center”를 추가하십시오.

// Center responsive images
.img-responsive.img-center {
  margin: 0 auto;
}

답변

@media (max-width: 767px) {
   img {
     display: table;
     margin: 0 auto;
   }
}