이미지 데드 센터를 부트스트랩에 맞추는 방법

이미지 데드 센터를 부트스트랩에 맞추는 방법

저는 부트스트랩 프레임워크를 사용하고 있으며 성공하지 못한 채 이미지를 수평으로 중앙에 배치하려고 합니다.

저는 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>

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

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

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

올바른 방법은 다음과 같습니다.

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

2018년 업데이트

그center-block클래스가 부트스트랩 4에 더 이상 없습니다.부트스트랩 4에서 이미지를 중앙에 배치하려면 다음을 사용합니다.mx-auto d-block...

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

이미지에 'center-block'을 클래스로 추가 - 추가 CSS가 필요하지 않음

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

Twitter 부트스트랩에는 .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;
}

다음을 사용할 수 있습니다.위의 부트스트랩 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;
}

bootstrap img 클래스와 함께 마진 속성을 사용할 수 있습니다.

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

사용 중justify-content-center컨테이너 내의 행으로 클래스를 지정합니다.부트스트랩 4와 잘 작동합니다.

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

브라우저 버전에 문제가 없다면 새로운 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는 완벽하게 브라우저의 중심에 있을 수 있습니다.

다음 부트스트랩 클래스를 사용하여 수정합니다.

<img class="mx-auto d-block" src="../path/to/.." alt="Image">

2023년 업데이트.부트스트랩 v5.

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

사용해야 합니다.

<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;
        }
}

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

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

위의 많은 옵션들이 저에게 효과가 없었습니다.하지만, 이것은 효과가 있었습니다!

<div class="container">
    <div class="row">
        <div class="col-sm-12" style="text-align: center;"><img class="center-block" src="img_path" /></div>
    </div>
</div>

IN Bootstarp 5.0

사용하다

.vmx-auto.d-block

이전 솔루션의 CSS를 아래와 같이 변경할 수 있습니다.

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

이렇게 하면 상위 항목의 모든 요소가 중앙에 배치됩니다.div뿐만 아니라.

언급URL : https://stackoverflow.com/questions/10879955/how-to-align-an-image-dead-center-with-bootstrap