Twitter Bootstrap으로 요소를 수평 또는 수직으로 중앙에 배치하려면 어떻게 해야 합니까?
html 요소를 수직 또는 수평으로 메인 부모 내부에 중심을 맞출 수 있는 방법이 있습니까?
업데이트: 지난 2013년 초에는 이 답변이 맞았을 가능성이 높았지만, 더 이상 사용해서는 안 됩니다.적절한 솔루션은 다음과 같은 오프셋을 사용합니다.
class="mx-auto"
다른 사용자들은 다음과 같은 네이티브 부트스트랩 클래스도 사용할 수 있다고 제안합니다.
class="text-center"
class="pagination-centered"
부트스트랩 설명서에서:
요소를 다음으로 설정합니다.
display: block그리고 센터비아margin. 믹스인과 클래스로 이용 가능합니다.
<div class="center-block">...</div>
div에서 이미지의 중심을 맞추려고 하는데 이미지의 중심이 맞지 않는 경우, 다음과 같이 문제를 설명할 수 있습니다.
<div class="col-sm-4 text-center">
<img class="img-responsive text-center" src="myPic.jpg" />
</div>
그img-responsive수업은 a를 추가합니다.display:block이미지 태그에 대한 지시, 정지text-align:center(text-center일을 시작했습니다.
해결책:
<div class="col-sm-4">
<img class="img-responsive center-block" src="myPic.jpg" />
</div>
추가하기center-block클래스가 우선합니다.display:block사용하여 입력한 명령어img-responsive수업이. 수업이.img-responsive클래스, 이미지는 추가하는 것만으로도 중심을 잡을 것입니다.text-center학급
또한 이제 부트스트랩 4는 플렉스박스를 기본적으로 사용하기 때문에 플렉스박스의 기본과 사용법을 알아야 합니다.
Brad Schiff가 만든 훌륭하고 빠르게 진행되는 비디오 튜토리얼을 소개합니다.
여기 멋진 치트 시트가 있습니다.
부트스트랩 4에서는 센터링 방식이 변경되었습니다.
부트 스트랩의 수평 중앙 4
text-center에 여전히 사용됩니다.display:inline요소들mx-auto갈음하다center-block가운데로display:flex아이들.offset-*아니면mx-auto그리드 열 가운데에 사용할 수 있습니다.
mx-auto(자동 x축 여백) 가운데로 이동display:block아니면display:flex정의된 너비를 가지는 요소, (%,vw,px, 등).플렉스박스는 그리드 컬럼에서 기본적으로 사용되므로 플렉스박스 센터링 방법도 다양합니다.
BS4의 수직 센터링에 대해서는 다음을 참조하십시오. https://stackoverflow.com/a/41464397
다음과 같이 CSS 파일에 직접 작성할 수 있습니다.
.content {
position: absolute;
top: 50%;
left:50%;
transform: translate(-50%,-50%);
}<div class = "content" >
<p> some text </p>
</div>나는 이것을 사용합니다.
<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>
수평 센터링의 경우 다음과 같은 것을 가질 수 있습니다.
.centering{
float:none;
margin:0 auto
}
<div class="span8 centering"></div>
부트스트랩 4를 사용하면 플렉스 기반 HTML 클래스를 사용할 수 있습니다.d-flex,justify-content-center,그리고.align-items-center:
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex justify-content-center align-items-center">
<button type="submit" class="btn btn-primary">Create</button>
</div>출처 : 부트스트랩 4.1
저는 비슷한 질문에서 나온 이 솔루션이 마음에 듭니다.
부트스트랩 사용
text-center실제 테이블 데이터에 대한 클래스<td>테이블 헤더<th>요소들이. 그래서.
<td class="text-center">Cell data</td>그리고.<th class="text-center">Header cell data</th>
부트스트랩 4에서 당신이 할 수 있는 것을 발견했습니다.
중앙 수평은 정말로text-center학급
center vertical 하지만 부트스트랩 클래스를 사용하면 둘 다 추가됩니다.mb-auto mt-auto여백 상단과 여백 하단이 자동으로 설정되도록 합니다.
부트스트랩 4의 플렉스 특성 사용으로 이를 해결할 수 있습니다.다음 클래스를 사용할 수 있습니다.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex justify-content-center align-items-center">
<button type="submit" class="btn btn-primary">Create</button>
</div>이 클래스는 내용의 중심을 수평과 수직으로 맞춥니다.
부트스트랩용으로 몇개 품목의 수직 중앙 4개
유연성 규칙을 위한 d-flex
항목의 수직 방향에 대한 flex-column
align-items-중심 수평중심
justice-content-center:수직 중심 맞춤
style='높이: px;' 중심이 계산되거나 h-100 클래스를 사용하는 설정점의 경우 반드시 사용해야 합니다.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex flex-column align-items-center 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>부트스트랩 5를 사용하면 사용할 수 있습니다.my-auto콜 안의 수직 중심부
언급URL : https://stackoverflow.com/questions/10088706/how-can-i-center-elements-horizontally-or-vertically-with-twitter-bootstrap
'source' 카테고리의 다른 글
| $.get of jquery는 비동기식입니까? (0) | 2023.11.05 |
|---|---|
| AngularJS 지시 콜백 (0) | 2023.11.05 |
| C++ 함수 포인터를 C 함수 포인터로 변환 (0) | 2023.11.05 |
| WordPress 웹사이트 게시물 테이블에 HTML 컨텐츠 저장 이슈 발생 (0) | 2023.11.05 |
| Wordpress에서 WooCommerce "My Account" 메뉴의 URL을 변경하려면 어떻게 해야 합니까? (0) | 2023.11.05 |