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

285

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

css twitter-bootstrap

— itsme
소스

2

이것은 수평 및 수직 중심에 대해 좋은 게시물입니다 : 여기를 참조하십시오

— markvandencorput

2

나도 수평 정렬 문제에 직면했다; 나는 단순히 <center></center>태그 를 사용했다

— Utpal-Ur Best Pal

4

@ Utpal-UrBestPal <center>태그는 약 12 년 전에 사용되지 않습니다.

— Niels Keurentjes

246

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

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

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

@Henning과 @trejder 덕분에

— itsme
소스

22

정확히 동일한 스타일이 Bootstrap에 이미 포함되어 있습니다. 그냥 사용class="text-center"

— Henning

3

또는 .pagination-centered대안으로.

— trejder

7

이것은 대답이어야하며, 다른 것들은 질문의 전체 '부트 스트랩'부분을 무시합니다.

— Ryan McDonough

1

@RyanMcDonough 네, 효과적으로 이것은 다른 사람들이 제안한 것이므로 내가 대답으로 확인 했습니까?

— itsme

1

text-center레이아웃에 사용 하는 것은 매우 나쁜 습관입니다. Bootstrap에서 열을 정렬하는 올바른 방법은 col-XX-offset-Y클래스 를 사용하는 것 입니다. getbootstrap.com/css/#grid-offsetting . 이 답변은 2013 년에 옳았지만 더 이상 오늘날에는 사용해서는 안됩니다.

— Niels Keurentjes

76

로부터 부트 스트랩 문서 :

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

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

— m0000g
소스

55

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

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 의 우수하고 빠르게 진행되는 비디오 자습서 는 다음과 같습니다.

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

— cssyphus
소스

32

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을 참조 하십시오.

— 짐
소스

30

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

.content {
  position: absolute;
  top: 50%;
  left:50%;
  transform: translate(-50%,-50%);
  }

<div class = "content" >
  
   <p> some text </p>
  </div>

스 니펫 확장

— kirgiz_jigit
소스

9

나는 이것을 사용한다

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

— 아 타박
소스

1

어떤 경우에는하지 작업 (참조합니까 본질적으로 같은 대답에 코멘트를 하고 사용하지 않습니다 중심으로 부트 스트랩 특정 클래스를 .

— 댄 Dascalescu에게

7

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

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

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

— 페르시아만
소스

4

이미지에서 직접 사용될 때 작동하지 않습니다 (적어도 현재 구현에서는 아닙니다) <img src="img/logo.png" style="float:none; margin:0 auto" />. 주변 img부모 div및 제공 .text-center또는 .pagination-centered부모 클래스 것은 마치 마법처럼 작동합니다.

— trejder

2

margin : 0 auto로 요소를 가운데에 배치하려면 해당 요소에 너비를 추가해야합니다. 위의 예제에서 span8의 너비는 가슴 띠로 지정되어 있지만 너비는 지정되지 않았지만 이미지는 <img src = "img / logo.png"style = "float : none; margin : 0 auto; width : 300px" />는 부모 내부의 이미지를 가로로 가운데에 배치합니다.

— Raul

2

이것은 질문의 "부트 스트랩"부분을 무시합니다.

— Dan Dascalescu

5

나는 비슷한 질문 에서이 솔루션을 좋아합니다. https://stackoverflow.com/a/25036303/2364401text-center 실제 테이블 데이터 <td>및 테이블 헤더 <th>요소 에 부트 스트랩 클래스를 사용하십시오 . 그래서

<td class="text-center">Cell data</td>

과

<th class="text-center">Header cell data</th>

— ander 더 밀러
소스

5

부트 스트랩 4를 사용하면 flex를 사용할 수 있습니다

<div class="d-flex justify-content-center align-items-center">
    <button type="submit" class="btn btn-primary">Create</button>
</div>

출처 : 부트 스트랩 4.1

— 알브 시크
소스

3

bootstrap 4 + Flex이 문제를 해결하십시오

당신이 사용할 수있는

<div class="d-flex justify-content-center align-items-center">
    <button type="submit" class="btn btn-primary">Create</button>
</div>

스 니펫 확장

수평 및 수직 중심에 있어야합니다.

— 타 우프 피아 탈리
소스

0

Bootstrap 4 에서이 작업을 수행 할 수 있음을 발견했습니다.

가운데 수평 은 실제로 text-center클래스입니다

센터 수직 그러나 부트 스트랩 클래스를 사용 mb-auto mt-auto하면 마진 상단과 마진 하단이 자동으로 설정됩니다.

— 온라인 토마스
소스

0

대한 bootstrap4 몇 가지 항목의 수직 중심

플렉스 규칙에 대한 d-flex

품목의 수직 방향을위한 플렉스 컬럼

센터링을위한 정당화 컨텐츠 센터

style = 'height : 300px;' 중심이 계산 위치이거나 h-100 클래스를 사용하는 설정 점을 가져야합니다.

<div class="d-flex flex-column justify-content-center bg-secondary" style="
    height: 300px;
">
    <div class="p-2 bg-primary">Flex item</div>
    <div class="p-2 bg-primary">Flex item</div>
    <div class="p-2 bg-primary">Flex item</div>
  </div>

— 라밀 길파 노프
소스