source

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

nicesource 2023. 10. 11. 20:48
반응형

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

저는 부트스트랩 3을 이용해 카탈로그를 만듭니다.태블릿에 표시될 때, 제품 이미지는 작은 크기(500x500)와 브라우저의 너비가 767 픽셀이기 때문에 보기 흉합니다.화면 중앙에 이미지를 넣고 싶은데, 왠지 그럴 수가 없어요.누가 그 문제를 해결하는데 도움을 줄까요?

Screenshot of part of a product page with the product not centered underneath the headline

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-responsiveimg-thumbnailwill 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

'source'의 다른글

  • 현재글반응형 이미지 정렬 센터 부트스트랩 3

관련글

댓글

티스토리툴바