Twitter 부트스트랩을 사용하여 열 가운데 맞춤
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>갖고 싶어요div수업이 있는..centered용기 내에서 중심이 잡히도록 합니다.이 있을 경우 행을 사용할 수 .div, 하만지금그냥은지,그▁a냥▁just▁want▁s▁s금.div하나의 열 크기를 용기 내 중앙에 배치합니다(12개의 열).
저는 또한 위의 접근법이 충분한지 확신할 수 없습니다. 왜냐하면 의도가 그것을 상쇄하지 않기 때문입니다.div반으로외부에 여유 공간이 필요하지 않습니다.div 그고그내들의 .div비례하여 축소하다div 외부 공간을 비워 균등하게 분포되도록 합니다(용기 너비가 하나의 열과 같을 때까지 축소).
에는 두 .<div> 3 부트스트랩 3:
접근 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 (구 어로치구 2 (프)margin:auto)
검증된 열 크기를 중앙에 배치할 수 있습니다.margin: 0 auto;부트스트랩의시스템에 .당신은 부트스트랩의 그리드 시스템에 의해 추가되는 부동을 처리하기만 하면 됩니다.다음과 같은 사용자 지정 CSS 클래스를 정의하는 것이 좋습니다.
.col-centered{
float: none;
margin: 0 auto;
}
이제 화면 크기에 상관없이 모든 열 크기에 추가할 수 있으며 부트스트랩의 응답형 레이아웃과 원활하게 작동합니다.
<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에 추가해서 그리드 시스템과 함께 작동하게 할 수 있습니다.
부트스트랩 5(2023 업데이트)
부트스트랩 5는 플렉스박스 기반이기 때문에 센터링은 부트스트랩 4와 유사합니다.자동 여백을 사용하여 열을 가운데로 밀어 넣을 수 있습니다...
<div class="row">
<div class="col-3 mx-auto text-center border">
<p>
I'm centered (margin: auto)
</p>
</div>
</div>
-또는-
flexbox 유틸즉사용스래클티리즉(▁(,,justify-content-center가운데로...
<div class="row justify-content-center">
<div class="col-4 text-center border">
<p>
I'm centered
</p>
</div>
</div>
https://codeply.com/p/9mpTQJ3fIn
부트스트랩 4(2020년 업데이트)
플렉스박스 기반 부트스트랩 4에서는 센터링 방법이 변경되었습니다.
text-center도 에여사용다니됩히에 됩니다.display:inlinemx-auto를 대체합니다.center-blockdisplay:blockoffset-*또는mx-auto그리드 열을 중앙에 배치하는 데 사용할 수 있습니다.
mx-auto축 여백은 중심(동축여이백)이 됩니다.display:block또는display:flex정의된 폭을 갖는 요소, (%,vw,px등).Flexbox는 그리드 열에서 기본적으로 사용되므로 다양한 Flexbox 중심 맞추기 방법도 있습니다.
BS4의 수직 중심은 다음을 참조하십시오. https://stackoverflow.com/a/41464397/171456
부트스트랩 3(원답)
열 중심을 맞추는 일반적인 방법은 "오프셋"(즉, 다음)을 사용하는 것입니다.col-md-offset-3)
센터링 요소에는 다음과 같은 것이 있습니다.center-block 도우미 클래스
사용할 수도 있습니다.text-center텍스트(및 인라인 요소)를 중앙에 배치합니다.
대응 데모: https://codeply.com/p/sRH9hSKup1
EDIT - 댓글에 언급된 것처럼center-block 및 컬럼내대작및업한에에 display:block요소, 그러나 열 자체에서는 작동하지 않습니다(col-*은 div를 사용하기 때문입니다.float.
3은 이제부 3.1.1과 함께 합니다..center-block이 도우미 클래스는 컬럼 시스템과 함께 작동합니다.
부트스트랩 3 도우미 클래스 센터.
<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 속성에 의해 재정의됩니다.
PS:
이 클래스를 추가한 후에는 올바른 순서로 클래스를 설정하는 것을 잊지 마십시오.
<div class="col-md-6 center-block">Example</div>
부트스트랩 3에는 이제 이를 위한 기본 제공 클래스가 있습니다..center-block
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}
만약 당신이 여전히 2.X를 사용하고 있다면, 이것을 당신의 CSS에 추가하세요.
저의 은 중앙열대내접방다같다습니음과식은근한에다같을 사용하는 입니다.display: inline-block 및 열에 text-align: center컨테이너 상위 항목입니다.
'centered를 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;
}
JSFidle: 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>
및 부스트v3 및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/ #dll-context
효과가 있습니다.아마도 진부한 방법이겠지만, 그것은 잘 작동합니다.반응성(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>
콜의 중심을 잡으려면 아래 코드를 사용해야 합니다.콜은 여백 자동 이외의 부유 요소입니다.또한 아무것도 뜨지 않도록 설정할 것입니다.
<body class="container">
<div class="col-lg-1 col-md-4 centered">
<img data-src="holder.js/100x100" alt="" />
</div>
</body>
위의 col-lg-1을 centraled 클래스로 중심 맞추기 위해, 우리는 다음과 같이 쓸 것입니다.
.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(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 을 참조하십시오. :-)
사용할 수 있습니다.text-center행을 위해 그리고 내부 디브가 가지고 있는지 확인할 수 있습니다.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/
간격띄우기의 또 다른 방법은 다음과 같이 두 개의 빈 열을 갖는 것입니다.
<div class="col-md-4"></div>
<div class="col-md-4">Centered Content</div>
<div class="col-md-4"></div>
이것은 아마도 최선의 답은 아닐 것입니다. 하지만 이것에 대한 창의적인 해결책이 하나 더 있습니다.cala_dev가 지적한 것처럼 열 오프셋은 열 크기가 짝수인 경우에만 작동합니다.그러나 행을 중첩함으로써 불균일한 열 중심화도 달성할 수 있습니다.
12의 격자 안에 1의 열을 가운데에 두고자 하는 원래 질문을 계속합니다.
- 간격띄우기 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>
이 피들을 참조하십시오. 결과를 보려면 출력 창의 크기를 늘려야 합니다. 그렇지 않으면 열이 감깁니다.
이것은 제 코드는 아니지만 완벽하게 작동합니다(부트스트랩 3에서 테스트됨). 그리고 저는 콜오프셋을 가지고 장난칠 필요가 없습니다.
데모:
/* 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 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;
}
그의 접근법 1에서 사용된 cala_dev처럼, 나는 사용이 제한된 센터 블록이나 여백 대신 오프셋 방법을 선호하지만, 그가 언급했듯이:
이 방법에는 분명한 단점이 있습니다. 이 방법은 짝수 열 크기에만 적용되므로 .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>
사용하다mx-auto부트스트랩 4를 사용하는 당신의 div 클래스에서.
<div class="container">
<div class="row">
<div class="mx-auto">
You content here
</div>
</div>
</div>
부트스트랩 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));
}
인데 한 3개씩 md화면에서 다음 작업을 수행합니다.
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와 col-md-2 타기.
합니다.text-center:
<body class="container">
<div class="col-md-12 text-center">
<img data-src="holder.js/100x100" alt="" />
</div>
</body>
매우 유연한 솔루션 Flexbox를 부트스트랩에 사용할 수 있습니다.
justify-content: center;
열을 가운데에 둘 수 있습니다.
플렉스를 확인해 보세요.
이 코드를 사용해 보십시오.
<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 등으로 변경하면 됩니다.
언급URL : https://stackoverflow.com/questions/18153234/center-a-column-using-twitter-bootstrap
'programing' 카테고리의 다른 글
| Xcode의 후행 공백 잘라내기 (0) | 2023.06.05 |
|---|---|
| lapply와 do.call의 차이점은 무엇입니까? (0) | 2023.06.05 |
| Gemfile을 찾을 수 없습니다. (0) | 2023.05.31 |
| C#은 첫 번째 패스 예외 필터링을 지원하지 않는 이유는 무엇입니까? (0) | 2023.05.31 |
| 텍스트 편집을 위한 첫 글자 대문자화 (0) | 2023.05.31 |