Bootstrap 3을 사용하여 카탈로그를 작성합니다. 태블릿에 표시 될 때 제품 이미지는 작은 크기 (500x500)와 브라우저에서 너비 767 픽셀로 인해보기 흉하게 보입니다. 화면 중앙에 이미지를 넣고 싶지만 어떤 이유로 든 할 수 없습니다. 문제 해결에 누가 도움이됩니까?
답변:
Bootstrap v3.0.1 이상을 사용하는 경우이 솔루션을 대신 사용해야 합니다 . 사용자 정의 CSS로 Bootstrap의 스타일을 재정의하지 않고 대신 Bootstrap 기능을 사용합니다.
내 원래 답변은 후손에 대한 아래에 표시됩니다
이것은 유쾌하게 쉬운 수정입니다. .img-responsiveBootstrap에서 이미 설정 했기 때문에 이미지를 중앙에 배치하는 데 display: block사용할 수 있습니다 margin: 0 auto.
.product .img-responsive {
margin: 0 auto;
}margin: 0 auto.img-responsive를 변경하는 대신 을 사용하여 새 클래스를 만드는 것이 좋습니다.
.center-blockTwitter Bootstrap 3 ( v3.0.1 이후 ) 에는 클래스가 있으므로 다음을 사용하십시오.
<img src="..." alt="..." class="img-responsive center-block" />class="img-responsive" style="margin: 0 auto;"나를 위해 작동 class="img-responsive center-block"하지 않습니다 (bootstrap 3,하지만 몇 달 된 버전)
<a href="#"> </a>쌍으로 감싸면 클릭 가능한 영역이 이미지보다 약간 더 클 수있는 밀폐 컨테이너의 전체 너비로 확장됩니다. 이것은 "빈"공간이라고 생각하는 것을 클릭하는 사용자를 혼란스럽게 할 수 있습니다.
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-responsive
여전히 작업 할 수 있습니다 img-responsive이 스타일 클래스를 사용하면 다른 이미지에 영향 주지 않고 .
이 태그 앞에 id / div id / class 섹션을 추가하여 img중첩 순서를 정의 할 수 있습니다. 이 관습img-responsive 는 해당 영역에서만 작동합니다.
다음과 같이 정의 된 HTML 영역이 있다고 가정하십시오.
<section id="work">
<div class="container">
<div class="row">
<img class="img-responsive" src="some_image.jpg">
</div>
</div>
</section>그러면 CSS는 다음과 같습니다.
section#work .img-responsive{
margin: 0 auto;
}참고 :이 답변은 img-responsive전체 변경의 잠재적 영향 과 관련이 있습니다. 물론 center-block가장 간단한 솔루션입니다.
이 코드를 시도해보십시오. 중앙 블록 클래스가 부트 스트랩 4가 없으므로 부트 스트랩 4가있는 작은 아이콘에서도 작동합니다.이 방법을 시도하면 도움이됩니다. 당신은 설정하여 이미지의 위치를 변경할 수 있습니다 .col-md-12에 .col-md-8또는 .col-md-4당신 개까지입니다.
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="text-xs-center text-lg-center">
<img src="" class="img-thumbnail">
</div>
</div>
</div>
</div>margin : 0 auto를 정의하여 수정할 수 있습니다.
또는 col-md-offset을 사용할 수도 있습니다
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<style>
.img-responsive{
margin:0 auto;
}
</style>
<body>
<div class="container">
<h2>Image</h2>
<div class="row">
<div class="col-md-12">
<p>The .img-responsive class makes the image scale nicely to the parent element (resize the browser window to see the effect):</p>
<img src="http://www.w3schools.com/bootstrap/cinqueterre.jpg" class="img-responsive" alt="Cinque Terre" width="304" height="236">
</div>
</div>
</div>
</body>
</html>표준 클래스를 사용하는 모든 Booostrap 객체에 적용되는보다 정확한 방법은 이미지가 부모에서 상속 할 수 있으므로 위쪽 및 아래쪽 여백을 설정하지 않는 것이므로 항상 사용하고 있습니다.
.text-center .img-responsive {
margin-left: auto;
margin-right: auto;
}또한 Gist를 만들었으므로 버그로 인해 변경 사항이 적용되는 경우 업데이트 버전은 항상 여기에 있습니다 : https://gist.github.com/jdrda/09a38bf152dd6a8aff4151c58679cc66
지금까지 가장 좋은 해결책은 다음과 같습니다 <img class="center-block" ... />. 그러나 아무도 어떻게 center-block작동 하는지 언급하지 않았습니다 .
부트 스트랩 v3.3.6을 예로 들어 보겠습니다.
.center-block {
display: block;
margin-right: auto;
margin-left: auto;
}dispalyfor 의 기본값 <img>은 inline입니다. 값 block은 요소를 블록 요소로 표시합니다 (예 <p>:). 새 줄에서 시작하여 전체 너비를 차지합니다. 이러한 방식으로 두 여백 설정을 통해 이미지가 가로 가운데로 유지됩니다.
:)