Bootstrap 3을 사용하여 카탈로그를 작성합니다. 태블릿에 표시 될 때 제품 이미지는 작은 크기 (500×500)와 브라우저에서 너비 767 픽셀로 인해보기 흉하게 보입니다. 화면 중앙에 이미지를 넣고 싶지만 어떤 이유로 든 할 수 없습니다. 문제 해결에 누가 도움이됩니까?
답변
Bootstrap v3.0.1 이상을 사용하는 경우이 솔루션을 대신 사용해야 합니다 . 사용자 정의 CSS로 Bootstrap의 스타일을 재정의하지 않고 대신 Bootstrap 기능을 사용합니다.
내 원래 답변은 후손에 대한 아래에 표시됩니다
이것은 유쾌하게 쉬운 수정입니다. .img-responsive
Bootstrap에서 이미 설정 했기 때문에 이미지를 중앙에 배치하는 데 display: block
사용할 수 있습니다 margin: 0 auto
.
.product .img-responsive {
margin: 0 auto;
}
답변
.center-block
Twitter 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;
}
}