질문자 :bsr
Twitter Bootstrap 3 의 컨테이너(12개 열) 내에서 한 열 크기의 div를 가운데에 맞추려면 어떻게 합니까?
.centered { background-color: red; }
<!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <body class="container"> <div class="col-lg-1 col-offset-6 centered"> <img data-src="holder.js/100x100" alt="" /> </div> </body>
.centered 클래스가 컨테이너 내 중앙에 배치되는 div div 가 있는 경우 행을 사용할 수 있지만 지금은 컨테이너(12개 열) 중앙에 하나의 열 크기가 div
div 를 반으로 상쇄하지 않기 때문에 위의 접근 방식이 충분히 좋은지 확신하지 못합니다. 나는 외부의 무료 공간을 필요로하지 않는 div 와의 내용 div 비례 축소. 균등하게 분산되도록 div 외부의 공간 을 비우고 싶습니다(컨테이너 너비가 한 열과 같아질 때까지 축소).
부트스트랩 3에서 <div> 열을 중앙에 배치하는 방법에는 두 가지가 있습니다.
접근법 1(오프셋):
첫 번째 접근 방식은 부트스트랩의 자체 오프셋 클래스를 사용하므로 마크업을 변경하거나 추가 CSS를 사용할 필요가 없습니다. 핵심은 행의 나머지 크기의 절반과 같은 오프셋 을 설정하는 것입니다. 예를 들어 크기가 2인 열은 오프셋 5, 즉 (12-2)/2 를 추가하여 중앙에 배치됩니다.
마크업에서는 다음과 같습니다.
<div class="row"> <div class="col-md-2 col-md-offset-5"></div> </div>
이제 이 방법에는 명백한 단점이 있습니다. 짝수 열 크기에서만 작동 하므로 .col-X-2 , .col-X-4 , col-X-6 , col-X-8 및 col-X-10 만 지원됩니다.
접근 방식 2(이전 margin:auto )
입증된 여백을 사용하여 모든 열 크기 를 가운데에 맞출 수 margin: 0 auto; 기술. 부트스트랩의 그리드 시스템에 의해 추가된 부동(floating)을 처리하기만 하면 됩니다. 다음과 같은 사용자 정의 CSS 클래스를 정의하는 것이 좋습니다.
.col-centered{ float: none; margin: 0 auto; }
이제 모든 화면 크기의 모든 열 크기에 추가할 수 있으며 Bootstrap의 반응형 레이아웃과 원활하게 작동합니다.
<div class="row"> <div class="col-lg-1 col-centered"></div> </div>
참고: 두 기술 모두 .row .container 내부 중앙에 배치할 수 있지만 컨테이너 클래스의 패딩으로 인해 실제 열 크기에서 최소한의 차이를 알 수 있습니다.
업데이트:
v3.0.1 부트스트랩에는 margin: 0 auto 를 사용하는 center-block 이라는 내장 클래스가 있지만 float:none 때문에 이를 CSS에 추가하여 그리드 시스템에서 작동하도록 할 수 있습니다.
열을 중앙에 배치하는 선호되는 방법은 "오프셋"을 사용하는 것입니다(예: col-md-offset-3 ).
부트스트랩 3.x 센터링 예제
센터링 요소의 경우 center-block 도우미 클래스가 있습니다.
text-center 를 사용하여 텍스트(및 인라인 요소) 를 가운데에 맞출 수 있습니다.
반응형 데모 : http://bootply.com/91632
편집 - 주석에서 언급했듯이 center-block 은 열 내용 및 display:block 요소에서 작동하지만 float 사용하기 때문에 col-* divs)에서는 작동하지 않습니다.
2020년 업데이트
이제 Bootstrap 4 에서는 센터링 방법이 변경되었습니다.
-
text-center 는 여전히 display:inline 요소에 사용됩니다. -
mx-auto 는 center-block 을 center display:block 요소로 바꿉니다. -
offset-* 또는 mx-auto 를 사용하여 그리드 열을 가운데에 배치할 수 있습니다.
mx-auto (자동 x축 여백)는 정의된 너비 ( % , vw , px 등 display:block 또는 display:flex 요소를 중앙에 배치합니다. Flexbox는 기본적 으로 그리드 열에 사용되므로 다양한 flexbox 센터링 방법도 있습니다.
데모 부트스트랩 4 수평 센터링
BS4의 수직 센터링은 https://stackoverflow.com/a/41464397/171456을 참조하십시오.
이제 Bootstrap 3.1.1은 .center-block 과 함께 작동하고 이 도우미 클래스는 열 시스템과 함께 작동합니다.
부트스트랩 3 도우미 클래스 센터 .
이 jsfiddle 데모를 확인하십시오.
<div class="container"> <div class="row"> <div class="center-block">row center-block</div> </div> <div class="row"> <div class="col-md-6 brd"> <div class="center-block">1 center-block</div> </div> <div class="col-md-6 brd"> <div class="center-block">2 center-block</div> </div> </div> </div> <div class="row"> <div class="col-xs-2 col-center-block">row col-xs-2 col-center-block</div> </div>
col-center-block 도우미 클래스를 사용하는 행 열 중심.
.col-center-block { float: none; display: block; margin: 0 auto; /* margin-left: auto; margin-right: auto; */ }
사용자 정의 CSS 파일에 다음을 추가하기만 하면 됩니다. 부트스트랩 CSS 파일을 직접 편집하는 것은 권장되지 않으며 CDN 사용 기능을 취소합니다.
.center-block { float: none !important }
왜요?
부트스트랩 CSS(버전 3.7 이하)는 여백을 사용합니다. 0 auto; , 그러나 크기 컨테이너의 float 속성에 의해 재정의됩니다.
추신 :
이 클래스를 추가한 후에는 올바른 순서로 클래스를 설정하는 것을 잊지 마십시오.
<div class="col-md-6 center-block">Example</div>
Bootstrap 3 에는 이제 이 .center-block
.center-block { display: block; margin-left: auto; margin-right: auto; }
여전히 2.X를 사용하고 있다면 이것을 CSS에 추가하십시오.
중앙 열에 대한 나의 접근 방식은 열에 대해 display: inline-block text-align: center 를 사용하는 것입니다.
row 'centered' CSS 클래스를 추가하기만 하면 됩니다.
HTML:
<div class="container-fluid"> <div class="row centered"> <div class="col-sm-4 col-md-4"> Col 1 </div> <div class="col-sm-4 col-md-4"> Col 2 </div> <div class="col-sm-4 col-md-4"> Col 3 </div> </div> </div>
CSS:
.centered { text-align: center; font-size: 0; } .centered > div { float: none; display: inline-block; text-align: left; font-size: 13px; }
JSFiddle: http://jsfiddle.net/steyffi/ug4fzcjd/
부트스트랩 버전 3에는 .text-center 클래스가 있습니다.
이 클래스를 추가하기만 하면 됩니다.
text-center
단순히 다음 스타일을 로드합니다.
.text-center { text-align: center; }
예시:
<div class="container-fluid"> <div class="row text-center"> <div class="col-md-12"> Bootstrap 4 is coming.... </div> </div> </div>
Bootstrap v3 및 v4에서는 <div> .justify-content-center 를 추가하기만 하면 .row
<div class="row justify-content-center"> <div class="col-1">centered 1 column</div> </div>
https://getbootstrap.com/docs/4.0/utilities/flex/#justify-content
이것은 작동합니다. 아마도 해킹 방법이지만 잘 작동합니다. 반응(Y)에 대해 테스트되었습니다.
.centered { background-color: teal; text-align: center; }
부트스트랩 4를 사용하면 여기에 언급된 대로 justify-content-md-center
<div class="container"> <div class="row justify-content-md-center"> <div class="col col-lg-2"> 1 of 3 </div> <div class="col-md-auto"> Variable width content </div> <div class="col col-lg-2"> 3 of 3 </div> </div> <div class="row"> <div class="col"> 1 of 3 </div> <div class="col-md-auto"> Variable width content </div> <div class="col col-lg-2"> 3 of 3 </div> </div> </div>
<div class="container-fluid"> <div class="row"> <div class="col-lg-4 col-lg-offset-4"> <img src="some.jpg"> </div> </div> </div>
열을 중앙에 맞추려면 아래 코드를 사용해야 합니다. cols는 margin auto 외에 플로터 요소입니다. 또한 float 없음으로 설정합니다.
<body class="container"> <div class="col-lg-1 col-md-4 centered"> <img data-src="holder.js/100x100" alt="" /> </div> </body>
위의 col-lg-1을 중심 클래스로 가운데 맞추려면 다음과 같이 작성합니다.
.centered { float: none; margin-left: auto; margin-right: auto; }
div 내부의 내용을 가운데에 text-align:center .
.centered { text-align: center; }
모바일이 아닌 데스크탑과 더 큰 화면에만 중앙에 놓으려면 다음 미디어 쿼리를 사용하십시오.
@media (min-width: 768px) { .centered { float: none; margin-left: auto; margin-right: auto; } }
그리고 모바일 버전에서만 div를 가운데에 맞추려면 아래 코드를 사용하세요.
@media (max-width: 768px) { .centered { float: none; margin-left: auto; margin-right: auto; } }
콘텐츠를 표시하는 열 하나를 col-xs-12(모바일 우선 ;-)로 설정하고 중앙에 콘텐츠를 원하는 너비를 제어하도록 컨테이너만 구성하면 됩니다.
.container { background-color: blue; } .centered { background-color: red; }
<body class="container col-xs-offset-3 col-xs-6"> <div class="col-xs-12 centered"> <img data-src="holder.js/100x100" alt="" /> </div> </body>
<body class="container col-xs-offset-1 col-xs-10"> <div class="col-xs-12 centered"> <img data-src="holder.js/100x100" alt="" /> </div> </body>
데모를 보려면 http://codepen.io/Kebten/pen/gpRNMe를 참조하십시오 :-)
오프셋의 또 다른 접근 방식은 두 개의 빈 행을 갖는 것입니다. 예를 들면 다음과 같습니다.
<div class="col-md-4"></div> <div class="col-md-4">Centered Content</div> <div class="col-md-4"></div>
text-center 를 사용할 수 있고 내부 div에 display:inline-block 이 있는지 확인할 수 있습니다( float 아님).
같이:
<div class="container"> <div class="row text-center" style="background-color : black;"> <div class="redBlock">A red block</div> <div class="whiteBlock">A white block</div> <div class="yellowBlock">A yellow block</div> </div> </div>
그리고 CSS:
.redBlock { width: 100px; height: 100px; background-color: aqua; display: inline-block } .whiteBlock { width: 100px; height: 100px; background-color: white; display: inline-block } .yellowBlock { width: 100px; height: 100px; background-color: yellow; display: inline-block }
바이올린: http://jsfiddle.net/DTcHh/3177/
이것이 최선의 답은 아니지만 이에 대한 창의적인 해결책이 하나 더 있습니다. koala_dev가 지적한 것처럼 열 오프셋은 짝수 열 크기에서만 작동합니다. 그러나 행을 중첩하면 고르지 않은 열도 중앙에 배치할 수 있습니다.
12의 그리드 내부에 1의 열을 가운데에 놓으려는 원래 질문을 고수하십시오.
- 5를 오프셋하여 2의 열을 가운데에 맞춥니다.
- 중첩된 행을 만들어 2개의 열 안에 새로운 12개의 열을 얻습니다.
- 1의 열을 가운데에 맞추고 싶고 1은 2의 "절반"(1단계에서 중심)이므로 이제 중첩된 행에서 6의 열을 가운데에 배치해야 합니다. 이는 3을 오프셋하여 쉽게 수행할 수 있습니다.
예를 들어:
<div class="container"> <div class="row"> <div class="col-md-offset-5 col-md-2"> <div class="row"> <div class="col-md-offset-3 col-md-6"> centered column with that has an "original width" of 1 col </div> </div> </div> </div> </div>
이 바이올린을 참조하십시오. 결과를 보려면 출력 창의 크기를 늘려야 합니다. 그렇지 않으면 열이 줄 바꿈됩니다.
이것은 내 코드가 아니지만 완벽하게 작동하며(Bootstrap 3에서 테스트됨) col-offset으로 어지럽힐 필요가 없습니다.
데모:
/* centered columns styles */ .col-centered { display: inline-block; float: none; /* inline-block space fix */ margin-right: -4px; background-color: #ccc; border: 1px solid #ddd; }
<div class="container"> <div class="row text-center"> <div class="col-xs-6 col-centered">Column 6</div> <div class="col-xs-6 col-centered">Column 6</div> <div class="col-xs-3 col-centered">Column 3</div> <div class="col-xs-3 col-centered">Column 3</div> <div class="col-xs-3 col-centered">Column 3</div> </div> </div>
.row 또는 .col 내부에 다음 스니펫을 추가하세요. 부트스트랩 4*용입니다.
d-flex justify-content-center
테이블 레이아웃 메커니즘을 사용하여 이를 달성할 수 있습니다.
메커니즘은 다음과 같습니다.
- 모든 열을 하나의 div로 묶습니다.
- 해당 div를 레이아웃이 고정된 테이블로 만듭니다.
- 각 열을 테이블 셀로 만듭니다.
- vertical-align 속성을 사용하여 콘텐츠 위치를 제어합니다.
샘플 데모는 여기
koala_dev가 그의 접근 방식 1에서 사용했듯이 나는 중심 블록이나 사용이 제한된 여백 대신 오프셋 방법을 선호하지만 그가 언급했듯이:
이제 이 방법에는 명백한 단점이 있습니다. 동일한 열 크기에서만 작동하므로 .col-X-2, .col-X-4, col-X-6, col-X-8 및 col-X-만 가능합니다. 10개가 지원됩니다.
이것은 홀수 열에 대해 다음 접근 방식을 사용하여 해결할 수 있습니다.
<div class="col-xs-offset-5 col-xs-2"> <div class="col-xs-offset-3"> // Your content here </div> </div>
매우 유연한 솔루션 flexbox를 Bootstrap에 사용할 수 있습니다.
justify-content: center;
열을 중앙에 배치할 수 있습니다.
플렉스를 확인하십시오.
부트스트랩 4 솔루션:
<div class="container"> <div class="row"> <div class="col align-self-center"> Column in the middle, variable width </div> </div> </div>
내가 센터의 필요성 단일 결코 때문에 .col- 내에서 .row , 나는 포장에 다음과 같은 클래스를 설정 .row 내 목표 컬럼의.
.col-center > [class*="col-"] { float: none; margin-left: auto; margin-right: auto; }
예시
<div class="full-container"> <div class="row col-center"> <div class="col-xs-11"> Foo </div> <div class="col-xs-11"> Bar </div> </div> </div>
그리드를 채울 정확한 숫자가 없을 때 화면의 열 요소를 가운데에 맞추려는 사람들을 위해 클래스 이름을 반환하는 JavaScript를 약간 작성했습니다.
function colCalculator(totalNumberOfElements, elementsPerRow, screenSize) { var arrayFill = function (size, content) { return Array.apply(null, Array(size)).map(String.prototype.valueOf, content); }; var elementSize = parseInt(12 / elementsPerRow, 10); var normalClassName = 'col-' + screenSize + '-' + elementSize; var numberOfFittingElements = parseInt(totalNumberOfElements / elementsPerRow, 10) * elementsPerRow; var numberOfRemainingElements = totalNumberOfElements - numberOfFittingElements; var ret = arrayFill(numberOfFittingElements, normalClassName); var remainingSize = 12 - numberOfRemainingElements * elementSize; var remainingLeftSize = parseInt(remainingSize / 2, 10); return ret.concat(arrayFill(numberOfRemainingElements, normalClassName + ' col-' + screenSize + '-push-' + remainingLeftSize)); }
md 화면에서 행당 3개를 가지려면 다음과 같이 하십시오.
colCalculator(5, 3, 'md') >> ["col-md-4", "col-md-4", "col-md-4", "col-md-4 col-md-push-2", "col-md-4 col-md-push-2"]
두 번째 인수는 12로 나눌 수 있어야 합니다.
부트스트랩 행에서 둘 이상의 열을 가운데에 맞추려면 열 수가 홀수인 경우 이 css 클래스를 해당 행의 모든 열에 추가하기만 하면 됩니다.
.many-cols-centered { // To horizontally center bootstrap odd cols, eg col-lg-9, col-md-3, works well in lg display:inline-block; float:none; }
따라서 HTML에는 다음과 같은 것이 있습니다.
<div class="row text-center"> <!-- text-center centers all text in that row --> <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 many-cols-centered"> <img src='assets/image1.jpg'> <h3>You See</h3> <p>I love coding.</p> </div> <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 many-cols-centered"> <img src='assets/image2.jpg'> <h3>You See</h3> <p>I love coding.</p> </div> <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 many-cols-centered"> <img src='assets/image3.jpg'> <h3>You See</h3> <p>I love coding.</p> </div> </div>
이 시도
<div class="row"> <div class="col-xs-2 col-xs-offset-5"></div> </div>
col-md-2 등과 같은 col 도 사용할 수 있습니다.
text-center 클래스를 사용하는 것이 좋습니다.
<body class="container"> <div class="col-md-12 text-center"> <img data-src="holder.js/100x100" alt="" /> </div> </body>
이 코드를 시도하십시오.
<body class="container"> <div class="col-lg-1 col-lg-offset-10"> <img data-src="holder.js/100x100" alt="" /> </div> </body>
여기서는 col-lg-1을 사용했으며 대형 장치에서 div를 적절하게 중앙에 맞추려면 오프셋이 10이어야 합니다. 중대형 장치의 중심에 필요한 경우 lg를 md 등으로 변경하십시오.
Bootstrap 4를 사용하여 div 클래스에서 mx-auto 를 사용하십시오.
<div class="container"> <div class="row"> <div class="mx-auto"> You content here </div> </div> </div>
<div class="container"> <div class="row row-centered"> <div class="col-xs-6 col-centered">Column 6</div> <div class="col-xs-6 col-centered">Column 6</div> <div class="col-xs-3 col-centered">Column 3</div> <div class="col-xs-3 col-centered">Column 3</div> <div class="col-xs-3 col-centered">Column 3</div> </div> </div>
CSS
/* centered columns styles */ .row-centered { text-align:center; } .col-centered { display:inline-block; float:none; /* reset the text-align */ text-align:left; /* inline-block space fix */ margin-right:-4px; text-align: center; background-color: #ccc; border: 1px solid #ddd; }
출처 : http:www.stackoverflow.com/questions/18153234/center-a-column-using-twitter-bootstrap-3