이미지 데드 센터를 부트 스트랩과 정렬하는 방법

부트 스트랩 프레임 워크를 사용하고 있으며 성공하지 않고 이미지를 가로로 가운데에 배치하려고합니다.

12 그리드 시스템을 3 개의 동일한 블록으로 분할하는 등 다양한 기술을 시도했습니다.

<div class="container">
    <div class="row">
      <div class="span4"></div>
      <div class="span4"><img src="logo.png" /></div>
      <div class="span4"></div>
    </div>
</div>

페이지를 기준으로 이미지를 중앙에 표시하는 가장 쉬운 방법은 무엇입니까?

Twitter Bootstrap v3.0.3에는 클래스가 있습니다 : center-block

중심 내용 블록

표시 할 요소를 설정합니다 : 여백을 통한 블록 및 가운데. 믹스 인 및 클래스로 제공됩니다.

태그에 클래스를 추가하면 .center-block됩니다.img

<div class="container">
  <div class="row">
    <div class="span4"></div>
    <div class="span4"><img class="center-block" src="logo.png" /></div>
    <div class="span4"></div>
  </div>
</div>

부트 스트랩에서 CSS 스타일 호출 .center-block이 이미 있습니다.

.center-block {
    display: block;
    margin-left: auto;
    margin-right: auto;
 }

여기 에서 샘플을 볼 수 있습니다

이 작업을 수행하는 올바른 방법은

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

2018 업데이트

center-block클래스가 더 이상 존재하지 부트 스트랩 4 . Bootstrap 4에서 이미지를 가운데에 맞추려면 mx-auto d-block...

<img src="..." class="mx-auto d-block"/>

이미지에 '중앙 블록'을 클래스로 추가-추가 CSS 필요 없음

<img src="images/default.jpg" class="center-block img-responsive"/>

트위터 부트 스트랩에는 다음과 같은 클래스가 있습니다. .pagination-centered

그것은 나를 위해 일했습니다 :

<div class="row-fluid">
   <div class="span12 pagination-centered"><img src="header.png" alt="header" /></div>
</div>

수업의 CSS는 다음과 같습니다.

.pagination-centered {
  text-align: center;
}

다음을 사용할 수 있습니다. 위의 Bootstrap 3.x를 지원합니다.

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

이미지와 함께 다른 것이 없다고 가정하면 가장 좋은 방법은 부모 text-align: center에서 사용하는 것 입니다 img.

.row .span4 {
    text-align: center;
}

편집하다

다른 답변에서 언급했듯이 부트 스트랩 CSS 클래스를 추가 할 수 있습니다 .text-center 를 부모 요소에 . 이것은 정확히 동일한 기능을 수행하며 v2.3.3 과 v3 에서 모두 사용할 수 있습니다

나를 위해 작동합니다. 사용해보십시오center-block

<div class="container row text-center">
    <div class="row">
      <div class="span4"></div>
      <div class="span4"><img class="center-block" src="logo.png" /></div>
      <div class="span4"></div>
    </div>
</div>

나는 똑같은 것이 필요하며 여기에서 해결책을 찾았습니다.

https://stackoverflow.com/a/15084576/1140407

<div class="container">
  <div class="row">
    <div class="span9 centred">
      This div will be centred.
    </div>
  </div>
</div>

CSS로 :

[class*="span"].centred {
  margin-left: auto;
  margin-right: auto;
  float: none;
}

부트 스트랩 img 클래스와 함께 margin 속성을 사용할 수 있습니다.

.name-of-class .img-responsive { margin: 0 auto; }

브라우저 버전에 문제가없는 경우 새로운 HTML5 기능을 사용할 수 있습니다.

HTML 파일에서 :

<div class="centerBloc">
  I will be in the center
</div>

그리고 CSS 파일에서 다음과 같이 씁니다.

body .centerBloc {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

따라서 div는 브라우저의 중심에 완벽하게 위치 할 수 있습니다.

사용해야합니다

<div class="row fluid-img">
  <img class="col-lg-12 col-xs-12" src="src.png">
</div>

.fluid-img {
    margin: 60px auto;
}

@media( min-width: 768px ){
        .fluid-img {
            max-width: 768px;
        }
}
@media screen and (min-width: 768px) {
        .fluid-img {
            padding-left: 0;
            padding-right: 0;
        }
}

justify-content-center컨테이너 내의 행에 클래스를 사용 하고 있습니다. 부트 스트랩 4와 잘 작동합니다.

<div class="container-fluid">
  <div class="row justify-content-center">
   <img src="logo.png" />
  </div>
</div>

이것을 만들고 Site.css에 추가했습니다.

.img-responsive-center {
    display: block;
    height: auto;
    max-width: 100%;
    margin-left:auto;
    margin-right:auto;
}

다음과 같이 이전 솔루션의 CSS를 변경할 수 있습니다.

.container, .row { text-align: center; }

부모의 모든 요소도 가운데에 배치해야 div합니다.