반응형 이미지 정렬 센터 부트스트랩 3
저는 부트스트랩 3을 이용해 카탈로그를 만듭니다.태블릿에 표시될 때, 제품 이미지는 작은 크기(500x500)와 브라우저의 너비가 767 픽셀이기 때문에 보기 흉합니다.화면 중앙에 이미지를 넣고 싶은데, 왠지 그럴 수가 없어요.누가 그 문제를 해결하는데 도움을 줄까요?
Twitter Bootstrap 3(v3.0.1 이후)에 클래스가 있으므로 다음을 사용합니다.
<img src="..." alt="..." class="img-responsive center-block" />
부트스트랩 v3.0.1 이상을 사용하는 경우 이 솔루션을 대신 사용해야 합니다.사용자 지정 CSS로 부트스트랩의 스타일을 재정의하지 않고 대신 부트스트랩 기능을 사용합니다.
나의 원래 답변은 후세를 위해 아래에 나와 있습니다.
이것은 아주 쉽게 고칠 수 있습니다.왜냐면.img-responsive
부트스트랩에서 이미 설정됨display: block
, 사용가능margin: 0 auto
이미지 중앙에 배치하려면:
.product .img-responsive {
margin: 0 auto;
}
클래스만 추가center-block
이미지에 맞게 부트스트랩 4에서도 작동합니다.
<img src="..." alt="..." class="center-block" />
참고:center-block
에도 통합니다.img-responsive
사용.
그냥 사용..text-center
부트스트랩 3을 사용하는 경우 클래스.
<div class="text-center">
<img src="..." alt="..."/>
</div>
참고: 이것은 img-response에서는 작동하지 않습니다.
이렇게 하면 이미지의 중심을 잡고 반응성을 높일 수 있습니다.
<img src="..." class="img-responsive" style="margin:0 auto;"/>
좀 더 "추상적인" 분류를 제안합니다..img-response 클래스와 함께 사용할 수 있는 새 클래스 "img-center"를 추가합니다.
// Center responsive images
.img-responsive.img-center {
margin: 0 auto;
}
다음과 같이 행/콜디브 안에 모든 이미지 썸네일을 넣기만 하면 됩니다.
<div class="row text-center">
<div class="col-12">
# your images here...
</div>
</div>
다 잘 될 겁니다!
여기서 d-block 속성을 사용하거나 부트스트랩에서 'text-center' 속성을 가진 상위 div 또는 CSS에서 'text-align: center' 속성을 사용할 수 있습니다.
기본적으로 이미지는 인라인 블록으로 표시되며 .mx-auto로 가운데를 맞추려면 이미지를 블록으로 표시해야 합니다.이 작업은 내장된 .d-block으로 수행할 수 있습니다.
<div>
<img class="mx-auto d-block" src="...">
</div>
또는 인라인 블록으로 유지하고 .text-center로 div로 래핑합니다.
<div class="text-center">
<img src="...">
</div>
여전히 작업할 수 있습니다.img-responsive
이 스타일 클래스로 다른 이미지에 영향을 주지 않습니다.
이 태그 앞에 섹션 ID/divid/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>
시도해 보기:
.img-responsive{
display: block;
height: auto;
max-width: 100%;
margin:0 auto;
}
.Image{
background:#ccc;
padding:30px;
}
<div class="Image">
<img src="http://minisoft.com.bd/uploads/ourteam/rafiq.jpg" class="img-responsive" title="Rafique" alt="Rafique">
</div>
@media (max-width: 767px) {
img {
display: table;
margin: 0 auto;
}
}
에 img-responsive
img-thumbnail
will setdisplay: block
.display: inline block
.
<div class="col-md-12 text-center">
<img class="img-responsive tocenter" />
</div>
.
<style>
.tocenter {
margin:0 auto;
display: inline;
}
</style>
<div class="text-align" style="text-align: center; ">
<img class="img-responsive" style="margin: auto;" alt="" src="images/x.png ?>">
</div>
이거 한번 해보세요.
정의 마진을 사용하여 수정할 수 있습니다: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>
표준 클래스를 사용하는 모든 Boostrap 개체에만 적용되는 보다 정확한 방법은 이미지가 상위 및 하위 여백을 설정하지 않는 것입니다(이미지가 상위에서 이를 상속할 수 있으므로).
.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;
}
의 :dispaly
위해서<img>
이다.inline
.block
예합니다)로 예:<p>
새로운 선에서 시작하여 전체 폭을 차지합니다.이와 같이 두 여백 설정을 사용하면 이미지가 수평으로 가운데를 유지할 수 있습니다.
프로젝트에서 2021.09:
<div class="d-flex" style="height: 60px; width: 60px;">
<img alt="ddd" src="myurl" class="m-auto"/>
</div>
언급URL : https://stackoverflow.com/questions/18462808/responsive-image-align-center-bootstrap-3
'source' 카테고리의 다른 글
PowerShell 및 StringBuilder (0) | 2023.10.16 |
---|---|
Link-XML 하위 요소와 요소의 차이점 (0) | 2023.10.11 |
워드프레스:'더 읽기 태그 삽입'은 어떻게 작동합니까? (0) | 2023.10.11 |
CSS를 동적으로 로드하는 중 (0) | 2023.10.11 |
워드프레스의 궁극 멤버 플러그인으로 사용자 지정 탭 만들기 (0) | 2023.10.11 |