[css] 트위터 부트 스트랩-수평 또는 수직 요소를 중심에 배치하는 방법

Program / 글쓴이

부모님 안에 HTML 요소를 세로 또는 가로로 가운데에 배치하는 방법이 있습니까?

답변

업데이트 :이 답변은 2013 년 초에 정확했지만 더 이상 사용해서는 안됩니다. 적절한 솔루션 은 오프셋 을 사용합니다 .

다른 사용자의 제안에 관해서는 다음과 같은 기본 부트 스트랩 클래스도 있습니다.

class="text-center"
class="pagination-centered"

@Henning과 @trejder 덕분에

답변

로부터 부트 스트랩 문서 :

display: block를 통해 요소를 중앙에 설정하십시오 margin. 믹스 인 및 클래스로 제공됩니다.

<div class="center-block">...</div>

답변

이 질문에 대한 향후 방문자의 경우 :

div의 이미지를 중앙에 배치하려고하지만 이미지가 중앙에 있지 않으면 문제를 설명 할 수 있습니다.

문제의 jsFiddle 데모

<div class="col-sm-4 text-center">
    <img class="img-responsive text-center" src="myPic.jpg" />
</div>

img-responsive클래스는 추가 display:block정지 이미지 태그에 지시 text-align:center(text-center 작동 클래스).

해결책:

<div class="col-sm-4">
    <img class="img-responsive center-block" src="myPic.jpg" />
</div>

jsFiddle of the solution

center-block클래스를 추가 display:block하면img-responsive 됩니다.

img-responsive수업이 없으면 이미지는 text-center수업 을 추가하는 것만으로 중앙에 위치합니다.

최신 정보:

또한 Bootstrap4는 기본적으로 flexbox 를 사용하므로 flexbox 의 기본 사항과 사용법을 알아야합니다. .

Brad Schiff 의 우수하고 빠르게 진행되는 비디오 자습서 는 다음과 같습니다.

여기 좋은 치트 시트가 있습니다

답변

2018 업데이트

에서는 부트 스트랩 4 의 센터링 방법을 변경 ..

BS4의 수평 중심

  • text-center여전히 display:inline요소에 사용됩니다
  • mx-auto어린이 center-block들을 센터로 교체display:flex
  • offset-* 또는 mx-auto 그리드 열을 중앙에 배치하는 데 사용할 수 있습니다

mx-auto(자동 X 축 마진) 중앙 것 display:block또는 display:flex요소가 한정된 폭 ( %, vw, px, 등). Flexbox는 그리드 열에 기본적 으로 사용 되므로 다양한 flexbox 센터링 방법도 있습니다.

데모 부트 스트랩 4 수평 센터링

BS4의 수직 센터링에 대해서는 https://stackoverflow.com/a/41464397/171456을 참조 하십시오.

답변

다음과 같이 CSS 파일에 직접 쓸 수 있습니다. 

.content {
  position: absolute;
  top: 50%;
  left:50%;
  transform: translate(-50%,-50%);
  }
<div class = "content" >

   <p> some text </p>
  </div>

스 니펫 확장

답변

나는 이것을 사용한다 

<style>
    html, body {
        height: 100%;
        margin: 0;
        padding: 0 0;
    }

    .container-fluid {
        height: 100%;
        display: table;
        width: 100%;
        padding-right: 0;
        padding-left: 0;
    }

    .row-fluid {
        height: 100%;
        display: table-cell;
        vertical-align: middle;
        width: 100%;
    }

    .centering {
        float: none;
        margin: 0 auto;
    }
</style>
<body>
    <div class="container-fluid">
        <div class="row-fluid">
            <div class="offset3 span6 centering">
                content here
            </div>
        </div>
    </div>
</body>

답변

수평 중심 조정을 위해 다음과 같은 것을 가질 수 있습니다.

.centering{
float:none;
margin:0 auto
}

 <div class="span8 centering"></div>