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

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

---

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

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

중심 내용 블록

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

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

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

---

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

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

---

2018 업데이트

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

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

---

트위터 부트 스트랩에는 다음과 같은 클래스가 있습니다. .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; }

---

Seems we could use a new HTML5 feature if the browser version is not a problem:

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는 브라우저의 중심에 완벽하게 위치 할 수 있습니다.

---

You should use

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

---

I am using justify-content-center class to a row within a container. Works well with Bootstrap 4.

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

---

I created this and added to Site.css.

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

---

You could change the CSS of the previous solution as below:

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

This should center all the elements in the parent div as well.

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