Twitter Bootstrap을 사용하여 중앙 집중식 콘텐츠를 얻으려면 어떻게해야합니까?
나는 아주 기본적인 예를 따르려고 노력하고 있습니다. 시작 페이지와 그리드 시스템을 사용하여 다음을 기대했습니다.
<div class="row">
<div class="span12">
<h1>Bootstrap starter template</h1>
<p>Example text.</p>
</div>
</div>... 중앙 텍스트를 생성합니다.
그러나 여전히 맨 왼쪽에 나타납니다. 내가 도대체 뭘 잘못하고있는 겁니까?
이것은 텍스트 센터링을위한 것입니다 (질문의 내용입니다 ).
다른 유형의 콘텐츠는 Flavien의 답변을 참조하십시오 .
업데이트 : Bootstrap 2.3.0+ 답변
원래의 대답은 초기 버전의 부트 스트랩이었습니다. 부트 스트랩 2.3.0부터는 div에 클래스를 제공 할 수 있습니다.text-center .
원래 답변 (2.3.0 이전)
당신은 두 개의 클래스 중 하나를 정의 할 필요가 row또는 span12로모그래퍼을 text-align: center. http://jsfiddle.net/xKSUH/ 또는 http://jsfiddle.net/xKSUH/1/ 참조
참고 : 이것은 Bootstrap 3에서 제거되었습니다 .
Pre-Bootstrap 3에서는 다음 pagination-centered과 같이 CSS 클래스를 사용할 수 있습니다 .
<div class="span12 pagination-centered">
Centered content.
</div>
클래스 pagination-centered는 이미 bootstrap.css (또는 bootstrap.min.css)에 있으며 단 하나의 규칙이 있습니다.
.pagination-centered{text-align:center;}
와 부트 스트랩 2.3.0. 그냥 수업을 사용하십시오text-center
여기에있는 대부분의 사람들은 실제로 텍스트 내용뿐만 아니라 전체div 를 중앙 에 배치하는 방법을 찾고 있다고 생각 합니다 (사소한 ...).
두 번째 방법 (text-align : center를 사용하는 대신)은 HTML에서 항목을 가운데에 맞추는 방법은 고정 너비와 자동 여백 (왼쪽 및 오른쪽)이있는 요소를 갖는 것입니다. Bootstrap에서 자동 여백을 정의하는 스타일은 "컨테이너"클래스입니다.
<div class="container">
<div class="span12">
"Centered stuff there"
</div>
</div>
여기에서 바이올린을 살펴보십시오 : http://jsfiddle.net/D2RLR/7788/
2019 업데이트-부트 스트랩 4
"중앙 콘텐츠"는 여러 가지를 의미 할 수 있으며 부트 스트랩 센터링은 원래 게시물 이후로 많이 변경되었습니다.
수평 중앙
부트 스트랩 3
text-centerdisplay:inline요소에 사용됩니다.center-blockdisplay:block요소 를 중심으로col-*offset-*그리드 기둥을 중심으로- navbar를 중앙에 배치하려면 이 답변 을 참조하십시오.
부트 스트랩 4
text-center여전히display:inline요소에 사용됩니다.mx-autocenter-block중심display:block요소로 대체offset-*또는mx-auto그리드 기둥을 중앙에 배치하는 데 사용할 수 있습니다.justify-content-centerinrow은 중앙 에 사용할 수도 있습니다.col-*
mx-auto(자동 X 축 마진) 중앙 것 display:block또는 display:flex요소가 한정된 폭 ( %, vw, px, 등). Flexbox는 그리드 열에서 기본적 으로 사용 되므로 다양한 flexbox 센터링 방법도 있습니다.
수직 중심
이제 Bootstrap 4는 기본적으로 flexbox이므로 auto-margins , flexbox utils 또는 수직 정렬 유틸리티 와 함께 디스플레이 유틸리티 를 사용하여 수직 정렬에 대한 다양한 접근 방식이 있습니다. 처음에는 "수직 정렬 유틸리티"가 분명해 보이지만 인라인 및 테이블 디스플레이 요소 에서만 작동합니다. 다음은 Bootstrap 4 수직 센터링 옵션입니다.
1-자동 여백을 사용하는 세로 가운데 :
수직으로 가운데에 맞추는 또 다른 방법은를 사용하는 것 my-auto입니다. 그러면 컨테이너 내의 요소가 중앙에 배치됩니다. 예를 들어, h-100행을 전체 높이로 만들고 열 my-auto을 세로로 가운데에 배치합니다 col-sm-12.
<div class="row h-100">
<div class="col-sm-12 my-auto">
<div class="card card-block w-25">Card</div>
</div>
</div>
my-auto 수직 y 축의 여백을 나타내며 다음과 같습니다.
margin-top: auto;
margin-bottom: auto;
2-Flexbox가있는 수직 중앙 :
Bootstrap 4 .row는 이제 모든 열에서 수직으로 중앙에 display:flex사용할 수 있습니다 align-self-center.
<div class="row">
<div class="col-6 align-self-center">
<div class="card card-block">
Center
</div>
</div>
<div class="col-6">
<div class="card card-inverse card-danger">
Taller
</div>
</div>
</div>
또는 align-items-center전체에 사용 .row하여 세로 중앙 정렬을 모두 col-*행에서 ...
<div class="row align-items-center">
<div class="col-6">
<div class="card card-block">
Center
</div>
</div>
<div class="col-6">
<div class="card card-inverse card-danger">
Taller
</div>
</div>
</div>
3-디스플레이 유틸리티를 사용하는 수직 중앙 :
부트 스트랩 4 갖는 디스플레이 유틸 사용될 수 display:table, display:table-cell, display:inline, 등이이 함께 사용될 수있는 수직 배향 유틸 정렬 인라인으로, 인라인 블록 또는 테이블 셀 소자.
<div class="row h-50">
<div class="col-sm-12 h-100 d-table">
<div class="card card-block d-table-cell align-middle">
I am centered vertically
</div>
</div>
</div>
Bootstrap 3.1.1 에는 .center-blockdiv 센터링 을위한 클래스가 있습니다. 참조 : http://getbootstrap.com/css/#helper-classes-center .
중앙 콘텐츠 블록을
display: block통해 요소를 로 중앙에 설정합니다margin. 믹스 인 및 클래스로 제공됩니다.
<div class="center-block">...</div>
또는 다른 사람들이 이미 말했듯이 .text-center클래스를 사용하여 텍스트를 중앙에 배치하십시오.
이를 수행하는 가장 좋은 방법은 CSS 스타일을 정의하는 것입니다.
.centered-text {
text-align:center
}
그런 다음 가운데 텍스트가 필요한 곳에 다음과 같이 추가합니다.
<div class="row">
<div class="span12 centered-text">
<h1>Bootstrap starter template</h1>
<p>Use this document as a way to quick start any new project.<br> All you get is this message and a barebones HTML document.</p>
</div>
</div>
또는 p 태그를 중앙에 배치하려는 경우 :
<div class="row">
<div class="span12 centered-text">
<h1>Bootstrap starter template</h1>
<p class="centered-text">Use this document as a way to quick start any new project.<br> All you get is this message and a barebones HTML document.</p>
</div>
</div>
인라인 CSS가 적을수록 더 좋습니다.
.show-grid 클래스는 링크의 예제에서 가운데 정렬 된 텍스트를 적용합니다.
항상 style="text-align:center"행 div 또는 내가 생각하는 다른 클래스에 추가 할 수 있습니다 .
2013 년 2 월부터 어떤 경우에는 "span"div에 "centred"클래스를 추가합니다.
<div class="container">
<div class="row">
<div class="span9 centred">
This div will be centred.
</div>
</div>
</div>
그리고 CSS에 :
[class*="span"].centred {
margin-left: auto;
margin-right: auto;
float: none;
}
그 이유는 span * div가 왼쪽으로 플로팅되고 "auto margin"센터링 기술은 div가 플로팅되지 않은 경우에만 작동하기 때문입니다.
데모 (JSFiddle) : http://jsfiddle.net/5RpSh/8/embedded/result/
JSFiddle : http://jsfiddle.net/5RpSh/8/
Bootstrap 3을 사용하는 경우 .text-center 라는 내장 CSS 클래스도 있습니다 . 그것이 당신이 원하는 것입니다.
<div class="text-left">
left
</div>
<div class="text-center">
center
</div>
<div class="text-right">
right
</div>
jsfiddle의 예를 참조하십시오. http://jsfiddle.net/ucheng/Q4Fue/
Bootstrap 2.3에는 text-center클래스가 있습니다.
<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
제 편 CSS에서는 사용하기 쉽고 기억하기 쉬운 새로운 스타일을 정의합니다 .
.center { text-align: center;}
.left { text-align: left;}
.right { text-align: right;}
.justify { text-align: justify;}
.fleft { float: left;} /*-> similar to .pull-left already existing in bootstrap*/
.fright { float: right;} /*-> similar to .pull-right already existing in bootstrap*/
.vab { vertical-align: bottom;}
.bold { font-weight: bold;}
.italic { font-style: italic;}
좋은 생각인가요? 이것에 대한 좋은 관행이 있습니까?
Bootstrap 2.0 이상을 사용하는 경우
이렇게하면 div가 페이지 중앙에 배치 될 수 있습니다.
<div class="row">
<div class="span4 offset4">
//your content here gets centered of the page
</div>
</div>
Any text-align utility class would do the trick. Bootstrap has been using .text-center class for centering text for a long time now.
.text-center { text-align: center !important; }
Or you can create your own utilities. Some variations I've seen over the years:
.u-text-center { text-align: center !important; }
.ta-center { text-align: center !important; }
.ta\:c { text-align: center !important; }
You need to adjust with the .span.
Example:
<div class="container-fluid">
<div class="row-fluid">
<div class="span4"></div>
<!--/span-->
<div class="span4" align="center">
<div class="hero-unit" align="center">
<h3>Sign In</h3>
<form>
<div class="input-prepend">
<span class="add-on"><i class="icon-envelope"></i> </span>
<input class="span6" type="text" placeholder="Email address">
</div>
<div class="input-prepend">
<span class="add-on"><i class="icon-key"></i> </span>
<input class="span6" type="password" placeholder="Password">
</div>
</form>
</div>
</div>
<!-- /span -->
<div class="span4"></div>
</div>
<!-- /row -->
</div>
My preferred method for centering blocks of information while maintaining responsiveness (mobile compatibility) is to place two empty span1 divs before and after the content you wish to center.
<div class="row-fluid">
<div class="span1">
</div>
<div class="span10">
<div class="hero-unit">
<h1>Reading Resources</h1>
<p>Read here...</p>
</div>
</div><!--/span-->
<div class="span1">
</div>
</div><!--/row-->
For Bootstrap version 3.1.1 and above, the best class for centering the content is the .center-block helper class.
<div class="container">
<div class="col-md-12 centered">
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-10">
label
</div>
<div class="col-md-1"></div>
</div>
</div>
</div>
Do not use container-fluid in the main.
Center-block is also an option not referred in above answers
<div class="center-block" style="width:200px;background-color:#ccc;">...</div>
All the class center-block does is to tell the element to have a margin of 0 auto, the auto being the left/right margins. However, unless the class text-center or css text-align:center; is set on the parent, the element does not know the point to work out this auto calculation from, so it will not center itself as anticipated.
So text-center is a better option.
You can use any one of the below types
- Use the Bootstrap existing class
text-center. - Adding a custom style,
style = "text-align:center". Use a column offset:
Example:
<div class="col-md-offset-6 col-md-12"></div>
I created this class to keep the centered regardless of screen size while maintaining responsive features:
.container {
alignment-adjust: central;
}
Simply use a class, text-center, for the div or tag which you want. I think it may work fine. It is a Bootstrap class for text align center.
Here are some text alignment Bootstrap classes:
text-left, text-right, text-justify, etc.
<div class="row">
<div class="col-md-12 text-center">
<h1>Bootstrap starter template</h1>
<p>Example text.</p>
</div>
</div>
나는 두 가지 방법을 시도했고 div를 중앙에 배치하는 것이 잘 작동했습니다. 두 가지 방법 모두 모든 화면에서 div를 정렬합니다.
방법 1 : 푸시 사용 :
<div class = "col-lg-4 col-md-4 col-sm-4 col-xs-4 col-lg-push-4 col-md-push-4 col-sm-push-4 col-xs-push-4" style="border-style:solid;border-width:1px">
<h2>Grievance form</h2> <!-- To center this text, use style="text-align: center" -->
</div>
방법 2 : 오프셋 사용 :
<div class = "col-lg-4 col-md-4 col-sm-4 col-xs-4 col-lg-offset-4 col-md-offest-4 col-sm-offest-4 col-xs-offest-4" style="border-style:solid;border-width:1px">
<h2>Grievance form</h2> <!--to center this text, use style="text-align: center"-->
</div>
결과:
설명
부트 스트랩은 지정된 화면 점유율의 첫 번째 열인 왼쪽을 지정합니다. 오프셋을 사용하거나 푸시하면 'this'열이 'those'열만큼 이동합니다. 오프셋의 응답성에 몇 가지 문제가 있었지만 푸시는 굉장했습니다.
2018 업데이트 :
Bootstrap 4.1.3 에서는 class를 사용하여 콘텐츠를 중앙에 배치 할 수 있습니다 mx-auto.
<div class="mx-auto">
Centered element
</div>
참조 : https://getbootstrap.com/docs/4.1/utilities/spacing/#horizontal-centering
참고 URL : https://stackoverflow.com/questions/9184141/how-do-you-get-centered-content-using-twitter-bootstrap
'Nice programing' 카테고리의 다른 글
| '$ (this)'와 'this'의 차이점은 무엇입니까? (0) | 2020.10.03 |
|---|---|
| Swift에서 dispatch_once 싱글 톤 모델 사용 (0) | 2020.10.03 |
| Bash에서 문자열을 배열로 분할 (0) | 2020.10.03 |
| UIView 둥근 모서리 제공 (0) | 2020.10.03 |
| 동일한 디렉토리 또는 하위 디렉토리 내에서 클래스를 가져 오는 방법은 무엇입니까? (0) | 2020.10.03 |