Twitter Bootstrap 3을 사용하여 열 중앙에 배치
Twitter Bootstrap 3 의 컨테이너 (12 개 열) 내에서 한 열 크기의 div를 중앙에 어떻게 배치합니까 ?
.centered {
background-color: red;
}<body class="container">
<div class="col-lg-1 col-offset-6 centered">
<img data-src="holder.js/100x100" alt="" />
</div>
</body>컨테이너 내에서 div클래스 .centered가 중앙에 배치되는을 원합니다 . 여러 개의 divs 가있는 경우 행을 사용할 수 있지만 지금 div은 컨테이너 (12 개 열)의 중앙에 하나의 열 크기가 있는 a 를 원합니다 .
나는 또한 의도가 div반 으로 상쇄되지 않기 때문에 위의 접근 방식이 충분히 좋은지 확신하지 못합니다 . 나는 비율 div에 따라 div수축 의 내용과 외부의 여유 공간이 필요하지 않습니다 . div 외부의 공간을 균등하게 분배 하고 싶습니다 (컨테이너 너비가 한 열과 같을 때까지 축소).
<div>Bootstrap 3에서 열을 중앙에 배치하는 방법에는 두 가지가 있습니다 .
접근 방식 1 (오프셋) :
첫 번째 접근 방식은 Bootstrap의 자체 오프셋 클래스를 사용하므로 마크 업을 변경하지 않아도되고 추가 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;. 부트 스트랩의 그리드 시스템에 의해 추가 된 플로팅 만 처리하면됩니다. 다음과 같은 사용자 지정 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 부트 스트랩에는를 center-block사용 margin: 0 auto하지만 누락 된 라는 이름의 내장 클래스 가 float:none있으므로 CSS에 추가하여 그리드 시스템에서 작동하도록 할 수 있습니다.
의 선호하는 방법 열을 중심으로는 "오프셋"을 사용하는 것입니다 (예 : col-md-offset-3)
위해 요소를 중심으로 하는이 center-block 헬퍼 클래스 .
텍스트 (및 인라인 요소) text-center를 가운데에 사용할 수도 있습니다 .
편집 -주석에서 언급했듯이center-block열 내용 및display:block요소에서 작동하지만col-*Bootstrap이 .NET을 사용하기 때문에열 자체 (divs)에서는 작동하지 않습니다float.
2018 업데이트
이제 Bootstrap 4 에서는 센터링 방법이 변경되었습니다.
text-center여전히display:inline요소에 사용됩니다.mx-autocenter-block중심display:block요소로 대체offset-*또는mx-auto그리드 기둥을 중앙에 배치하는 데 사용할 수 있습니다.
mx-auto(자동 X 축 마진) 중앙 것 display:block또는 display:flex요소가 한정된 폭 ( %, vw, px, 등). Flexbox는 그리드 열에서 기본적 으로 사용 되므로 다양한 flexbox 센터링 방법도 있습니다.
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 파일에 다음을 추가하기 만하면됩니다. Bootstrap CSS 파일을 직접 편집하는 것은 권장되지 않으며 CDN 사용 기능을 취소합니다 .
.center-block {
float: none !important
}
왜?
Bootstrap CSS (버전 3.7 이하)는 margin : 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컨테이너 부모에 사용하는 것입니다.
CSS 클래스 'centered'를 row.
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 v4를 사용하면 다음을 추가 .justify-content-center하기 만하면됩니다 ..row <div>
<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
작동합니다. 아마도 hackish 방식이지만 잘 작동합니다. 반응 형 (Y)에 대해 테스트되었습니다.
.centered {
background-color: teal;
text-align: center;
}
콘텐츠를 표시하는 열 하나를 col-xs-12 (mobile-first ;-)로 설정하고 중앙 콘텐츠의 너비를 제어하도록 컨테이너 만 구성하면됩니다.
.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="container-fluid">
<div class="row">
<div class="col-lg-4 col-lg-offset-4">
<img src="some.jpg">
</div>
</div>
</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/
열을 중앙에 배치하려면 아래 코드를 사용해야합니다. cols는 margin auto 외에 floater 요소입니다. 또한 float none으로 설정합니다.
<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 클래스로 중앙에 배치하려면 다음과 같이 작성합니다.
.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;
}
}
이것은 아마도 최선의 답은 아니지만 이것에 대한 창의적인 해결책이 하나 더 있습니다. koala_dev에서 지적했듯이 열 오프셋은 짝수 열 크기에만 작동합니다. 그러나 행을 중첩하면 고르지 않은 열을 중앙에 배치 할 수도 있습니다.
12 그리드 안에 1 열을 중앙에 배치하려는 원래 질문을 고수하십시오.
- 2의 열을 오프셋하여 가운데에 5
- 중첩 된 행을 만들면 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>
참조 이 바이올린 당신이 결과를 볼 너무 위해 출력 윈도우의 크기를 증가해야한다는, 제발 메모를, 그렇지 않으면 열 바꿈됩니다.
오프셋의 또 다른 접근 방식은 다음과 같이 두 개의 빈 행을 갖는 것입니다.
<div class="col-md-4"></div>
<div class="col-md-4">Centered Content</div>
<div class="col-md-4"></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>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>
매우 유연한 솔루션 플렉스 박스를 부트 스트랩에 사용할 수 있습니다.
justify-content: center;
기둥을 중앙에 배치 할 수 있습니다
flex를 확인하십시오 .
부트 스트랩 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>
.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));
}
5 개의 요소가 있고 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>
이 코드를 사용해보십시오.
<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로 변경하십시오.
.row 또는 .col 안에 다음 코드 조각을 추가합니다. 이것은 Bootstrap 4 * 용입니다.
d-flex 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>
이것을 행에 넣으면 내부의 모든 열이 중앙에 배치됩니다.
.row-centered {
display: flex;
justify-content: space-between;
}
이 시도
<div class="row">
<div class="col-xs-2 col-xs-offset-5"></div>
</div>
, 등과 col같은 기타 를 사용할 수 있습니다 col-md-2.
나는 단순히 수업을 사용하는 것이 좋습니다 text-center.
<body class="container">
<div class="col-md-12 text-center">
<img data-src="holder.js/100x100" alt="" />
</div>
</body>
좀 더 정확하게 말하면 Bootstrap의 그리드 시스템은 12 개의 열을 포함하고 모든 콘텐츠를 중앙에 배치하기 위해 예를 들어 콘텐츠가 한 열을 차지합니다. 하나는 Bootstrap 그리드의 두 열을 차지하고 두 점유 열의 절반에 콘텐츠를 배치해야합니다.
<div class="row">
<div class="col-xs-2 col-xs-offset-5 centered">
... your content / data will come here ...
</div>
</div>
'col-xs-offset-5'는 그리드 시스템에 콘텐츠 배치를 시작할 위치를 알려줍니다.
'col-xs-2'는 콘텐츠가 차지해야하는 남은 열의 수를 그리드 시스템에 알려줍니다.
'centered'는 콘텐츠를 중심으로 정의 된 클래스입니다.
이 예제는 Bootstrap의 그리드 시스템에서 어떻게 보이는지 보여줍니다.
열 :
1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
....... 오프셋 ........ 데이터. ....... 사용되지 않음 ........
참고 URL : https://stackoverflow.com/questions/18153234/center-a-column-using-twitter-bootstrap-3
'development' 카테고리의 다른 글
| 문자열에서 공백을 어떻게 제거합니까? (0) | 2020.09.27 |
|---|---|
| 스크롤 후 요소가 보이는지 확인하는 방법은 무엇입니까? (0) | 2020.09.27 |
| MySQL 쿼리 결과를 CSV 형식으로 출력하는 방법은 무엇입니까? (0) | 2020.09.27 |
| visible : hidden과 display : none의 차이점은 무엇입니까? (0) | 2020.09.27 |
| Docker 컨테이너 내부에서 머신의 로컬 호스트에 어떻게 연결합니까? (0) | 2020.09.27 |