저는 점보트론 안에 있는 컨테이너 div를 수직으로 중앙에 배치하고 페이지 중간에 설정하는 방법을 찾고 있습니다.
.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>
수직 정렬은 이제 유연한 상자 레이아웃을 사용하여 매우 간단합니다. 오늘날 이 방법은 Internet Explorer 8 및 9를 제외한 광범위한 웹 브라우저에서 지원됩니다. 따라서 IE8/9에 대해 일부 해킹/폴리필 또는 다양한 접근법을 사용해야 합니다.
다음 I'에서는 **3줄의 텍스트**(이전 flexbox 구문과 관계없이)로 이 작업을 수행하는 방법을 보여 줍니다.
*참고: 수직 정렬을 위해 '.jumbotron'을 변경하는 대신 추가 클래스를 사용하는 것이 좋습니다. 예를 들어 vertical-center 클래스 이름을 사용합니다.
[예: 여기][5]**(JSbin의 경우 Mirror)
<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;
}
중요 참고 사항(데모에서 고려):
'높이' 또는 '최소 높이' 속성의 percentage 값은 부모 요소의 '높이'에 상대적이므로 부모의 '높이'를 명시적으로 지정해야 합니다.
공급업체 접두사/이전 플렉스박스 구문은 간략함으로 인해 게시된 스니펫에서 생략되었지만 온라인 예제에 있습니다.
Firefox 9 (I'vested)와 같은 일부 오래된 웹 브라우저에서 플렉스 컨테이너 - ".vertical-center"는 부모 내부에서 사용 가능한 공간을 차지하지 않으므로 "width: 100%"와 같은 "width" 속성을 지정해야 합니다.
또한 위에서 언급한 일부 웹 브라우저에서는 플렉스 항목인 ".container"가 중앙에 가로로 나타나지 않을 수 있습니다. auto의 좌우 여백은 플렉스 아이템에 아무런 영향을 미치지 않는 것으로 보인다.
따라서 우리는 '박스 팩/정의 콘텐츠'로 정렬할 필요가 있다.
열의 자세한 정보 및/또는 수직 정렬은 아래 항목을 참조하십시오.
이것은 내가 이 질문에 답할 때 썼던 오래된 답이다. 이 방법은 여기에서에 대해 논의되었으며 Internet Explorer 8 및 9에서도 작동해야 합니다. 간단히 설명하겠습니다.
인라인 흐름에서 인라인 레벨 요소는 '수직 정렬: 미들' 선언에 의해 중앙에 수직으로 정렬될 수 있다. W3C의 사양:
중간
상자의 수직 중간점을 부모 상자의 기준선과 부모 x 높이의 절반에 맞춥니다.
이 경우 부모 요소 - ".vertical-center"가 명시적인 "높이"를 갖는 경우, 만일 우리가 부모 요소와 정확히 같은 "높이"를 가진 자식 요소를 가질 수 있다면, 우리는 10모의 기준선10을 전체 키 자식의 중간점으로 이동시키고 놀랍게도 원하는 유입 자식이 포함되도록 할 수 있을 것이다.에' - 중앙에 수직으로 정렬한다.
즉, ":before" 또는 "::after" 유사 요소에 의해 ".vertical-center" 내에 풀 하이트 요소를 생성하고 이 요소의 기본 "display" 유형과 다른 자식인 ".container"를 "inline-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', 'absolute')? (확인을 위해) 및 더 높은 "z-index" 값을 추가하여 항상 다른 값보다 높은 값을 유지합니다.
'그냥' 유틸리티 클래스를 사용하여 d 플렉스 '와' 맞추십시오 항목에서와 센터.
<div class="jumbotron d-flex align-items-center">
<div class="container">
content
</div>
</div>
http://www.codeply.com/go/ui6ABmMTLv
<div class="jumbotron d-flex align-items-center min-vh-100">
<div class="container text-center">
I am centered vertically
</div>
</div>
< hr/>; 참조: https://stackoverflow.com/questions/42252443/vertical-align-center-in-bootstrap-4
Bootstrap.css를 추가한 다음 이것을 당신의 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;
}
이제 페이지를 호출합니다.
<div class="container-fluid">
<div class="row-fluid">
<div class="centering text-center">
Am in the Center Now :-)
</div>
</div>
</div>
, 중앙 가로로 부트스트랩에 4 사용할 수 있는 하위 클래스:
justify-content-center
, 중앙 세로일 부트스트랩에 4 사용할 수 있는 하위 클래스:
align-items-center
, t forget d 플렉스 클래스를 함께 사용할 수 있지만 이러한 너희에게베풀어진 don& # 39 s 클래스, 그래서 부트스트랩에 4 유틸리티에는 같은 it& # 39.
<div class="d-flex justify-content-center align-items-center" style="height:100px;">
<span class="bg-primary">MIDDLE</span>
</div>
내가 선호하는 기술:
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>
body {
display: table;
position: absolute;
height: 100%;
width: 100%;
}
.jumbotron {
display: table-cell;
vertical-align: middle;
}
[this Fiille][1]을 참조하십시오!
Ie 에서 테스트되었습니다, 파이어폭스, 크롬.
<! - begin 스니핏: js 숨기십시오: 거짓값 콘솔: 진정한 바벨. > 거짓값 -;
.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>
끝 - < 스니핏 >;!
[1] 의 [bootstrap4] 의 수직 가운데 일부 항목은
스타일 = & # 39, 두께: 300px, & # 39 를 사용하거나 , 점들이 설정되었습니다 센터뿐만 h-100* 클래스용 calc 수 있어야 합니다.
그럼 d 플렉스 양쪽 content center) div 에 수평 센터 그리고 일부 컨테이너입니다
그래서 우리는 히라리 3 태그: > div 열 -; > div 행일 -; div 컨테이너입니다
<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>
[1]: https://getbootstrap.com/docs/4.3/utilities/flex/ # 맞춤 컨텐트
방금 추가해야 할 경우, 4, # 39 를 사용하여 2 부트스트랩에 you& re:
<! - begin 스니핏: js 숨기십시오: 거짓값 콘솔: 진정한 바벨. > 거짓값 -;
.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 테이블 표에서 속도입니다.4 100 w h 100mb/s 및 중간 맞추십시오. 작업을 할 것이라고,,
지금 사용하고 있는 슬라이드에서는 정렬을 위한 콘텐츠 센터 / 위 / 아래 운행에서어떠한 세로일 - 함께 부트스트랩에 3 행. 3 열 부트스트랩에 동일한 높이와 세로일 정렬되고.
<! - begin 스니핏: js 숨기십시오: 거짓값 콘솔: 진정한 바벨. > 거짓값 -;
/* columns of same height styles */
.row-full-height {
height: 100%;
}
.col-full-height {
height: 100%;
vertical-align: middle;
}
.row-same-height {
display: table;
width: 100%;
/* fix overflow */
table-layout: fixed;
}
.col-xs-height {
display: table-cell;
float: none !important;
}
@media (min-width: 768px) {
.col-sm-height {
display: table-cell;
float: none !important;
}
}
@media (min-width: 992px) {
.col-md-height {
display: table-cell;
float: none !important;
}
}
@media (min-width: 1200px) {
.col-lg-height {
display: table-cell;
float: none !important;
}
}
/* vertical alignment styles */
.col-top {
vertical-align: top;
}
.col-middle {
vertical-align: middle;
}
.col-bottom {
vertical-align: bottom;
<div class="container">
<h2>Demo 1</h2>
<div class="row">
<div class="row-same-height">
<div class="col-xs-3 col-xs-height">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempus tincidunt porttitor. Praesent vehicula aliquam enim. Fusce non luctus eros, sit amet consequat velit. Pellentesque volutpat est et est imperdiet pharetra. Integer vestibulum feugiat malesuada. Proin a felis ut libero vestibulum fermentum ut sit amet est. Morbi placerat eget lacus sed sagittis. Nullam eu elit gravida arcu viverra facilisis. Quisque laoreet enim neque, ut consequat sem tincidunt at. Fusce lobortis scelerisque libero, eget vulputate neque. </div>
<div class="col-xs-3 col-xs-height col-top">2st column</div>
<div class="col-xs-3 col-xs-height col-middle">3st column</div>
<div class="col-xs-3 col-xs-height col-bottom">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempus tincidunt porttitor. Praesent vehicula aliquam enim. Fusce non luctus eros, sit amet consequat velit. Pellentesque volutpat est et est imperdiet pharetra.</div>
</div>
</div><!-- ./row -->
</div><!-- ./container -->
끝 - < 스니핏 >;!
이것은 [이스피들] [1] 데모.