부트스트랩에서 용기의 수직 중심을 맞추는 방법은?
수직으로 중심을 잡을 수 있는 방법을 찾고 있습니다.container 안의 jumbotron페이지 중앙에 설정할 수 있습니다.
.jumbotron화면의 전체 높이와 너비에 맞게 조정되어야 합니다..container는 div이의 .1025px페이지 중앙(세로 중앙)에 있어야 합니다.
저는 이 페이지가 스크린의 높이와 너비에 맞게 조정된 점보트론과 수직으로 중앙에 컨테이너를 배치하기를 원합니다.어떻게 하면 달성할 수 있을까요?
.jumbotron {
height:100%;
width:100%;
}
.container {
width:1025px;
}
.jumbotron .container {
max-width: 100%;
} <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="jumbotron">
<div class="container text-center">
<h1>The easiest and powerful way</h1>
<div class="row">
<div class="col-md-7">
<div class="top-bg"></div>
</div>
<div class="col-md-5 iPhone-features" style="margin-left:-25px;">
<ul class="top-features">
<li>
<span><i class="fa fa-random simple_bg top-features-bg"></i></span>
<p><strong>Redirect</strong><br>Visitors where they converts more.</p>
</li>
<li>
<span><i class="fa fa-cogs simple_bg top-features-bg"></i></span>
<p><strong>Track</strong><br>Views, Clicks and Conversions.</p>
</li>
<li>
<span><i class="fa fa-check simple_bg top-features-bg"></i></span>
<p><strong>Check</strong><br>Constantly the status of your links.</p>
</li>
<li>
<span><i class="fa fa-users simple_bg top-features-bg"></i></span>
<p><strong>Collaborate</strong><br>With Customers, Partners and Co-Workers.</p>
</li>
<a href="pricing-and-signup.html" class="btn-primary btn h2 lightBlue get-Started-btn">GET STARTED</a>
<h6 class="get-Started-sub-btn">FREE VERSION AVAILABLE!</h6>
</ul>
</div>
</div>
</div>
</div>유연한 박스 방식
이제 Flexible 박스 레이아웃을 사용하면 수직 정렬이 매우 간단해집니다.현재 이 방법은 Internet Explorer 8 & 9를 제외한 다양한 웹 브라우저에서 지원됩니다.따라서 IE8/9에 대해 몇 가지 해킹/폴리필 또는 다른 접근 방식을 사용해야 합니다.
다음에서는 기존의 flexbox 구문에 관계없이 텍스트 3줄로만 수행하는 방법을 보여드리겠습니다.
참고: 변경하는 대신 추가 클래스를 사용하는 것이 좋습니다..jumbotron수직 정렬을 달성할 수 있습니다.사용합니다.vertical-center예를 들어 클래스 이름입니다.
예제 여기(jsbin의 거울).
<div class="jumbotron vertical-center"> <!--
^--- Added class -->
<div class="container">
...
</div>
</div>
.vertical-center {
min-height: 100%; /* Fallback for browsers do NOT support vh unit */
min-height: 100vh; /* These two lines are counted as one :-) */
display: flex;
align-items: center;
}
중요 참고 사항(데모에서 고려):
백분율 값:
height아니면min-height은입니다에 입니다.height모의은을야다로야eyf,의은d 를 지정해야 합니다.height명시적으로 부모의벤더 접두사/이전 플렉스박스 구문은 간결성으로 인해 게시된 토막글에서는 생략되었지만 온라인 예제에는 존재합니다.
파이어폭스 9와 같은 일부 오래된 웹 브라우저에서는 플렉스 컨테이너 -
.vertical-center-이우 -모용한을지로야다을e다야oynd우지이-es-neee을e,et'width성:width: 100%.웹항목 - 에서 한 에서도 -
.container이 경우 - 중앙에 수평으로 나타나지 않을 수 있습니다.된 좌쪽/우된것다으로 보입니다.marginauto플렉스 아이템에는 영향이 없습니다.
따라서 다음과 같이 정렬할 필요가 있습니다.box-pack / justify-content.
열에 대한 자세한 내용 및/또는 수직 정렬에 대해서는 아래 항목을 참조할 수 있습니다.
기존 웹 브라우저의 전통적인 방식
이것은 제가 이 질문에 답할 때 썼던 오래된 답변입니다.이 방법은 여기서 논의되었으며 Internet Explorer 8과 9에서도 작동할 것으로 예상됩니다.간단히 설명해 드리겠습니다.
인라인 플로우에서 인라인 레벨 요소는 선언에 의해 중간에 수직으로 정렬될 수 있습니다.W3C 사양:
상자의 수직 중간 지점을 부모 상자의 기준선과 부모 상자의 x 높이의 절반을 함께 정렬합니다.
부모가 - 가 에 과 에 가 과의 경우.vertical-center - 이소 -를 갖습니다.height, 만약 우리가 똑같은 아이를 가질 수 있다면.height부모의 베이스라인을 전체 키의 아이의 중간 지점으로 이동시키고 놀랍게도 우리가 원하는 유입 아이를 만들 수 있을 것입니다..container -에로다다로d에o-rer.
다같이 모이기
는 에서 한 의 를 를 에도 는 의 한 에서 .vertical-center타고::before아니면::after와 기본 요소 변경display유형과 다른 아이,.containerinline-block.
을 합니다.vertical-align: middle;인라인 요소를 수직으로 정렬합니다.
여기 있습니다.
<div class="jumbotron vertical-center">
<div class="container">
...
</div>
</div>
.vertical-center {
height:100%;
width:100%;
text-align: center; /* align the inline(-block) elements horizontally */
font: 0/0 a; /* remove the gap between inline(-block) elements */
}
.vertical-center:before { /* create a full-height inline block pseudo=element */
content: " ";
display: inline-block;
vertical-align: middle; /* vertical alignment of the inline element */
height: 100%;
}
.vertical-center > .container {
max-width: 100%;
display: inline-block;
vertical-align: middle; /* vertical alignment of the inline element */
/* reset the font property */
font: 16px/1 "Helvetica Neue", Helvetica, Arial, sans-serif;
}
워킹 데모.
치 못한 가 발생하지 않도록 를 Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δauto아니면0아니면 그것을 바꿉니다.display타이프로 치다none필요한 경우:
@media (max-width: 768px) {
.vertical-center:before {
height: auto;
/* Or */
display: none;
}
}
그리고 하나 더:
이 있는 footer/header컨테이너 주변의 섹션, 해당 요소를 relative적절히 배치하고 높은 값을 추가하는 것이 좋습니다.z-index 항상 것들의 합니다. 히)상른의맨에록기치한치기한록e(에상히(r)mpoesn
2021년 업데이트
Bootstrap 5는 여전히 flexbox를 사용하므로 수직 센터링의 방법은 Bootstrap 4와 같습니다...
부트스트랩 4는 플렉스박스를 사용하기 때문에 수직 센터링 방법이 훨씬 쉽고 CSS를 추가로 필요로 하지 않습니다.
으로.d-flex그리고.align-items-center유틸리티 클래스..
<div class="jumbotron d-flex align-items-center">
<div class="container">
content
</div>
</div>
http://codeply.com/go/ui6ABmMTLv
중요:수직 중심은 높이에 상대적입니다.중심을 맞추려는 항목의 상위 컨테이너에는 정의된 높이가 있어야 합니다.페이지의 높이를 원하는 경우 사용vh-100아니면min-vh-100◦! 예를 들어,
<div class="jumbotron d-flex align-items-center min-vh-100">
<div class="container text-center">
I am centered vertically
</div>
</div>
Also see: https://stackoverflow.com/questions/42252443/vertical-align-center-in-bootstrap-4
Bootstrap.css를 추가한 다음 이것을 CSS에 추가합니다.
html, body{height:100%; margin:0;padding:0}
.container-fluid{
height:100%;
display:table;
width: 100%;
padding: 0;
}
.row-fluid {height: 100%; display:table-cell; vertical-align: middle;}
.centering {
float:none;
margin:0 auto;
}Now call in your page
<div class="container-fluid">
<div class="row-fluid">
<div class="centering text-center">
Am in the Center Now :-)
</div>
</div>
</div>부트스트랩 4에서:
수평으로 중심을 맞추려면 부트스트랩-4 클래스를 사용합니다.
justify-content-center
수직으로 중심을 맞추려면 부트스트랩-4 클래스를 사용합니다.
align-items-center
하지만 이들과 함께 d-flex 클래스를 사용하는 것을 잊지 마십시오. 부트스트랩-4 유틸리티 클래스입니다.
<div class="d-flex justify-content-center align-items-center" style="height:100px;">
<span class="bg-primary">MIDDLE</span>
</div>
참고: 이 코드가 작동하지 않을 경우 부트스트랩-4 유틸리티를 추가해야 합니다.
이 질문에 대한 직접적인 답은 아니지만 누군가에게 도움이 될 수도 있습니다.
내가 선호하는 기술:
body {
display: table;
position: absolute;
height: 100%;
width: 100%;
}
.jumbotron {
display: table-cell;
vertical-align: middle;
}
데모
body {
display: table;
position: absolute;
height: 100%;
width: 100%;
}
.jumbotron {
display: table-cell;
vertical-align: middle;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="jumbotron vertical-center">
<div class="container text-center">
<h1>The easiest and powerful way</h1>
<div class="row">
<div class="col-md-7">
<div class="top-bg">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
<div class="col-md-5 iPhone-features">
<ul class="top-features">
<li>
<span><i class="fa fa-random simple_bg top-features-bg"></i></span>
<p><strong>Redirect</strong><br>Visitors where they converts more.</p>
</li>
<li>
<span><i class="fa fa-cogs simple_bg top-features-bg"></i></span>
<p><strong>Track</strong><br>Views, Clicks and Conversions.</p>
</li>
<li>
<span><i class="fa fa-check simple_bg top-features-bg"></i></span>
<p><strong>Check</strong><br>Constantly the status of your links.</p>
</li>
<li>
<span><i class="fa fa-users simple_bg top-features-bg"></i></span>
<p><strong>Collaborate</strong><br>With Customers, Partners and Co-Workers.</p>
</li>
<a href="pricing-and-signup.html" class="btn-primary btn h2 lightBlue get-Started-btn">GET STARTED</a>
<h6 class="get-Started-sub-btn">FREE VERSION AVAILABLE!</h6>
</ul>
</div>
</div>
</div>
</div>IE, Firefox 및 Chrome에서 테스트되었습니다.
.parent-container {
position: relative;
height:100%;
width: 100%;
}
.child-container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}<div class="parent-container">
<div class="child-container">
<h2>Header Text</h2>
<span>Some Text</span>
</div>
</div>https://css-tricks.com/centering-css-complete-guide/ 에서 확인 가능
부트스트랩과 중앙을 수직으로 맞춥니다. 4
: :d-flex align-items-center
예
이것이 있는 경우:
<div class="col-3">
다음과 같이 바꿉니다.
<div class="col-3 d-flex align-items-center>
부트스트랩용으로 몇개 품목의 수직 중앙 4개
유연성 규칙을 위한 d-flex
항목의 수직 방향에 대한 flex-column
justice-content-center for centering
style='높이: 300pcs;'는 중심이 계산이거나 h-100 클래스를 사용하는 설정점에 대해 있어야 합니다.
수평 center div-flex justice-content-center 및 일부 컨테이너의 경우
그래서 우리는 div-column -> div-row -> div-column -> div-column의 3가지 태그의 계층 구조를 갖습니다.
<div class="d-flex flex-column justify-content-center bg-secondary"
style="height: 300px;">
<div class="d-flex justify-content-center">
<div class=bg-primary>Flex item</div>
</div>
<div class="d-flex justify-content-center">
<div class=bg-primary>Flex item</div>
</div>
</div>
부트스트랩 4를 사용하는 경우 디브를 2개만 추가하면 됩니다.
.jumbotron{
height:100%;
width:100%;
}<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<div class="jumbotron">
<div class="d-table w-100 h-100">
<div class="d-table-cell w-100 h-100 align-middle">
<h5>
your stuff...
</h5>
<div class="container">
<div class="row">
<div class="col-12">
<p>
More stuff...
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</body>클래스: d-table, d-table-cell, w-100, h-100 및 align-middle이 작업을 수행합니다.
컨테이너 클래스를 지정합니다.
.container{
height: 100vh;
width: 100vw;
display: flex;
}
용기 안에 있는 디브에게:
align-content: center;
이 디브 안에 있는 모든 내용이 페이지 중앙에 표시됩니다.
언급URL : https://stackoverflow.com/questions/22196587/how-to-vertically-center-a-container-in-bootstrap
'programing' 카테고리의 다른 글
| 지시문에서 호스트 구성 요소에 액세스하는 방법은 무엇입니까? (0) | 2023.09.21 |
|---|---|
| 자동 배선 종속성을 주입하지 못했습니다. (0) | 2023.09.21 |
| PDO: 백슬래시가 포함된 DB에서 필드 선택 (0) | 2023.09.16 |
| Wordpress REST API _fields 및 _embed 파라미터가 동시에 작동하지 않습니다. (0) | 2023.09.16 |
| C++ 문자열을 한 줄에 여러 개 연결하려면 어떻게 해야 합니까? (0) | 2023.09.16 |