부트스트랩 4의 수직 정렬 중심

programing

부트스트랩 4의 수직 정렬 중심

instargram 2023. 8. 30. 21:13

부트스트랩 4의 수직 정렬 중심

나는 부트스트랩 4를 사용하여 내 컨테이너를 페이지 중앙에 배치하려고 합니다.저는 지금까지 성공하지 못했습니다.어떤 도움이라도 주시면 감사하겠습니다.

제가 Codepen.io 에 구축했기 때문에 여러분들이 가지고 놀 수 있고 제가 아이디어가 부족하기 때문에 무엇이 작동하는지 알려주십시오.

var currentAuthor = "";
var currentQuote  = "";
function randomQuote() {
  $.ajax({
      url: "https://api.forismatic.com/api/1.0/?",
      dataType: "jsonp",
      data: "method=getQuote&format=jsonp&lang=en&jsonp=?",
      success: function( response ) {
        $("#quote-content").html('<h2 id="quote-content" class="display-5"><i class="fa fa-quote-left" aria-hidden="true"> ' + response.quoteText + ' <i class="fa fa-quote-right" aria-hidden="true"></i></h2>');
        $("#quote-author").html('<p id="quote-author" class="lead"><em>' + response.quoteAuthor + '</em></p>');
        
        currentAuthor = response.quoteAuthor;
        currentQuote  = response.quoteText
      }
  });
}

function openURL(url){
  window.open(url,'Share', 'width=550, height=400, toolbar=0, scrollbars=1 ,location=0 ,statusbar=0,menubar=0, resizable=0');
}

function tweetQuote(){
      openURL('https://twitter.com/intent/tweet?hashtags=quotes,freecodecamp&related=freecodecamp&text=' + encodeURIComponent('"' + currentQuote + '" - ' + currentAuthor));
}

$(document).ready(function () {
    randomQuote();

    $("#get-another-quote-button").click(function(){
        randomQuote();
    });

   $('#tweet').on('click', function() {
       tweetQuote();
   });
});

html, body {
  background-image: url("https://www.mylinea.com/wp-content/uploads/beautiful-trees-stock-photo-055.jpg");
    background-color: #17234E;
    margin-bottom: 0;
    min-height: 30%;
    background-repeat: no-repeat;
    background-position: center;
    -webkit-background-size: cover;
    background-size: cover;
}


.btn-new-quote {
    color: #0C0C0D;
    background-color: transparent;
    border-color: #414147;
}

.btn-new-quote:hover {
    color: #0C0C0D;
    background-color: #9A989E;
    border-color: #0C0C0D;
}

#tweet {
    color: RGB(100, 100, 100);
}

#tweet:hover {
    color: RGB(50, 50, 50);
}


.jumbotron {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    opacity: .85;
    border-color:  RGB(50, 50, 50);
    padding-bottom: 8px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<div class="container">
    <div class="row justify-content-center align-self-center">
        <div class="col-sm-6">
            <div class="jumbotron vertical-center text-center">
                <h2 id="quote-content" class="display-5"><i class="fa fa-quote-left" aria-hidden="true"></i><i class="fa fa-quote-right" aria-hidden="true"></i></h2>
                <p id="quote-author" class="lead"><em></em></p>
                <hr class="my-2">
                <div class="row align-items-center justify-content-between">
                    <div class="col-sm-1-4 text-left">
                        <a id="tweet" href="#">
                            <h2 class="display-4"><i class="fa fa-twitter" aria-hidden="true"></i></h2>
                        </a>
                    </div>
                    <div class="col-sm-1-4 text-right">
                        <button id="get-another-quote-button" type="button" class="btn btn-outline-secondary  btn-new-quote">Don't Quote Me on This...</button>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>

중요한! 수직 중심은 모체의 높이에 상대적입니다.

중심을 맞추려는 요소의 부모 높이가 정의되지 않은 경우 수직 중심 맞추기 솔루션이 작동하지 않습니다!

자, 수직 중심으로...

부트스트랩 5(2021년 업데이트)

부트스트랩 5는 여전히 플렉스박스 기반이므로 수직 센터링은 부트스트랩 4와 동일한 방식으로 작동합니다.예를들면,align-items-center,justify-content-centerparent(Flexbox 부모)에할 수 .row또는d-flex).

사용하다align-items-center 행 Flexbox 행상위(위▁()에서row또는d-flex)
사용하다justify-content-center 열 Flexbox 열상위(위▁(()d-flex flex-column)
사용하다my-auto 상위 Flexbox에서

부트스트랩 5의 수직 중심

부트스트랩 4

새로운 Flexbox & size 유틸리티를 사용하여 다음과 같은 기능을 사용할 수 있습니다.container 앤 풀트및하이및▁full트▁and.display: flex이러한 옵션에는 추가 CSS가 필요하지 않습니다(컨테이너 높이(즉, html, body)가 100%여야 함).

1 션옵 1align-self-center flexbox child ▁flex▁on목항.

<div class="container d-flex h-100">
    <div class="row justify-content-center align-self-center">
     I'm vertically centered
    </div>
</div>

https://codeply.com/go/fFqaDe5Oey

Flexbox 상위 옵션 2(.row이라display:flex; flex-direction:row)

<div class="container h-100">
    <div class="row align-items-center h-100">
        <div class="col-6 mx-auto">
            <div class="jumbotron">
                I'm vertically centered
            </div>
        </div>
    </div>
</div>

https://codeply.com/go/BumdFnmLuk

Flexbox 상위 옵션 3(.card이라display:flex;flex-direction:column)

<div class="container h-100">
    <div class="row align-items-center h-100">
        <div class="col-6 mx-auto">
            <div class="card h-100 border-primary justify-content-center">
                <div>
                    ...card content...
                </div>
            </div>
        </div>
    </div>
</div>

https://codeply.com/go/3gySSEe7nd

부트스트랩 4 수직 센터링에 대한 추가 정보

이제 부트스트랩 4는 플렉스박스 및 기타 유틸리티를 제공하므로 수직 정렬에 대한 많은 접근 방식이 있습니다.http://www.codeply.com/go/WG15ZWC4lf

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가 있는 수직 중심:

부트스트랩 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>

수직 중심 다른 높이 열 데모

중앙에 이 Q/A를 표시하되 높이는 동일하게 유지합니다.

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>

디스플레이 사용률 데모를 사용한 수직 중심

기타 예제
수직 중심 이미지<div>
수직 중심 .행 in .contain
수직 중심 및 하단 위치<div>
부모 내부의 수직 중심 자식
수직 중앙 전체 화면 점보트론

중요한! 제가 키를 언급했나요?

수직 중심은 상위 요소의 높이에 상대적입니다.만약 당신이 전체 페이지에 집중하고 싶다면, 대부분의 경우, 이것은 당신의 CSS여야 합니다...

body,html {
  height: 100%;
}

또는 사용min-height: 100vh(min-vh-100Bootstrap 4.1+)에 포함됩니다.부모 내부에 자식 요소를 중앙에 배치하려는 경우.상위 항목에는 정의된 높이가 있어야 합니다.

참고:
부트스트랩 4의 수직 정렬
부트스트랩 중앙 수직 및 수평 정렬

부트스트랩 버전 5 이상을 사용하여 아래 코드를 사용하여 콘텐츠를 수평 및 수직으로 중앙에 배치합니다.

<div class="vh-100 d-flex justify-content-center align-items-center">
  <h1>Centered horizontally and vertically!</h1>
</div>

상위 컨테이너를 구부리고 추가하여 컨테이너를 수직으로 정렬할 수 있습니다.align-items:center:

body {
  display:flex;
  align-items:center;
}

업데이트된 펜

부트스트랩 4교시를 따라하면서 이것을 해결할 수 있었습니다.

<div class="col text-center justify-content-center align-self-center">
    <img width=3rem src=".." alt="...">
</div>

위의 내용 중 저에게 맞는 것이 하나도 없었기 때문에 다른 답변을 추가합니다.

목표: bootstrap 4 flexbox 클래스를 사용하여 페이지에 div를 수직 및 수평으로 정렬합니다.

1단계: 가장 바깥쪽 div를 다음의 높이로 설정합니다.100vh그러면 높이가 베이포트 높이의 100%로 설정됩니다.당신이 이것을 하지 않으면, 다른 것은 작동하지 않을 것입니다.의 높이로 설정100%는 상위 항목에만 상대적이므로 상위 항목이 뷰포트의 전체 높이가 아닌 경우에는 아무 것도 작동하지 않습니다.아래 예제에서는 Body를 100vh로 설정했습니다.

2단계: 컨테이너 div를 플렉스박스 컨테이너로 설정합니다.d-flex학급.

3단계: div를 수평으로 중심에 맞춥니다.justify-content-center학급.

4단계: 중심을 수직으로 맞춥니다.align-items-center

5단계: 실행 페이지에서 수직 및 수평 중심의 div를 봅니다.

중심 div 자체에 대해 설정할 필요가 있는 특수 클래스는 없습니다(하위 div).

<body style="background-color:#f2f2f2; height:100vh;">

<div class="h-100 d-flex justify-content-center align-items-center">
    <div style="height:600px; background-color:white; width:600px;">
</div>

</div>

</body>

저는 부트스트랩으로 이런 식으로 했습니다.4.3.1:

<div class="d-flex vh-100">
  <div class="d-flex w-100 justify-content-center align-self-center">
    I'm in the middle
  </div>
</div>

.jumbotron {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

<div class="row">
  <div class="col-md-6">
     <img src="/assets/images/ebook2.png" alt="" class="img-fluid">
  </div>
  <div class="col-md-6 my-auto">
     <h3>Heading</h3>
     <p>Some text.</p>
   </div>
</div>

이 일어나는 입니다.<div class="col-md-6 my-auto">,my-auto열의 내용을 중앙에 배치합니다.이것은 위의 코드 샘플과 같이 이미지 크기가 가변적일 수 있고 이미지의 오른쪽 줄에 있는 텍스트가 이미지와 일치해야 하는 경우에 유용합니다.

저는 여기서 모든 답을 시도해 보았지만, 여기 h-100과 vh-100의 차이점이 있다는 것을 알게 되었습니다. 제 솔루션은 다음과 같습니다.

      <div className='container vh-100 d-flex align-items-center col justify-content-center'>
        <div className="">
             ...
        </div>
      </div >

<div class="col-lg-5 col-sm-5 offset-1 d-flex">
            <div class="offer-txt justify-content-center align-self-center">
                <span class="inner-title">Our Offer</span>
                <h2 class="section-title">Today’s Special </h2>
                <p>One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly.</p>
            </div>
        </div>

부트스트랩 4(베타)에서 다음을 사용합니다.align-middle수직 정렬에 대한 부트스트랩 4 설명서 참조:

수직 정렬 유틸리티를 사용하여 요소의 정렬을 변경합니다.수직 정렬은 인라인, 인라인 블록, 인라인 테이블 및 테이블 셀 요소에만 영향을 미칩니다.

»에서 .align-baseline,.align-top,.align-middle,.align-bottom,.align-text-bottom,그리고..align-text-top필요에 따라

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
</head>
<body>  
<div class="container">
    <div class="row align-items-center justify-content-center" style="height:100vh;">     
         <div>Center Div Here</div>
    </div>
</div>
</body>
</html>

부트스트랩 5 및 블레이저 웹 어셈블리:

<div class="d-flex align-items-center justify-content-center min" style="height: 50vh">
<button class="btn btn-outline-success mx-2">Register</button>
<button class="btn btn-outline-primary mx-2" style="width:123.44px">Login</button></div>

수직 정렬 이 부트스트랩 4개 클래스 사용:

방법 1:

상위: d-테이블

그리고.

하위: d-table-cell & align-middle & text-center

예:

<div class="tab-icon-holder d-table bg-light">
   <div class="d-table-cell align-middle text-center">
     <img src="assets/images/devices/Xl.png" height="30rem">
   </div>
</div>

부모님이 원이 되길 원한다면,

<div class="tab-icon-holder d-table bg-light rounded-circle">
   <div class="d-table-cell align-middle text-center">
     <img src="assets/images/devices/Xl.png" height="30rem">
   </div>
</div>

다음과 같은 두 가지 사용자 정의 CSS 클래스:

.tab-icon-holder {
  width: 3.5rem;
  height: 3.5rem;
 }
.rounded-circle {
  border-radius: 50% !important
}

최종 용도는 다음과 같습니다.

<div class="col-md-5 mx-auto text-center">
    <div class="d-flex justify-content-around">
     <div class="tab-icon-holder d-table bg-light rounded-circle">
       <div class="d-table-cell align-middle text-center">
         <img src="assets/images/devices/Xl.png" height="30rem">
       </div>
     </div>

     <div class="tab-icon-holder d-table bg-light rounded-circle">
       <div class="d-table-cell align-middle text-center">
         <img src="assets/images/devices/Lg.png" height="30rem">
       </div>
     </div>

     ...

    </div>
</div>

방법 2:다음을 사용할 수 있습니다.

상위: h-100 d-table mx-auto

그리고.

하위: d-테이블-셀 정렬-중간

방법 3:

다음을 사용할 수 있습니다.

상위: d-sxt 정렬-syslog-center

또한 콘텐츠를 수평적으로 중앙에 배치하려는 경우:

상위: d-sxt 정렬-중간합-중간합-내용-중심합

/*높이를 100vh */ 추가해야 합니다.

Center

사용하다.my-autobootsrap4) on yor (csrap4) 또는 div의 css

내용물을 100% 높이의 플렉스 박스 용기(e-100)에 넣습니다.그런 다음 prassify-content-center 클래스를 사용하여 중앙에서 내용을 정당화합니다.

<section class="container h-100 d-flex justify-content-center">
    <div class="jumbotron my-auto">
        <h1 class="display-3">Hello, Malawi!</h1>
    </div>
</section>

부트스트랩 5에서는 쉽게 할 수 있습니다.다음은 카드를 정렬하는 예입니다.카드 너비만 설정하면 되고, 나머지 설정은 부트스트랩 5 클래스를 사용합니다.

<div class="container d-flex vh-100">
  <div class="row mx-auto">
    <div class="col align-self-center p-4">
      <div class="card rounded-3 shadow-sm p-3" style="width:400px">
        <div class="card-body">
          <h1>I'am centered vertically and horizontally</h1>
        </div>
      </div>
    </div>
  </div>
</div>

모든 부트스트랩 버전 2, 3, 4 및 5의 경우 높이와 너비에 적합한 두 개의 사용자 지정 클래스만 있습니다.

.d_tbl{
  display:table;
  width:100%;
  height:200px;
}

.d_tblCel{
  vertical-align: middle;
  display: table-cell;
  text-align: center;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <div class="d_tbl" style="background-color:antiquewhite">
    <div class="d_tblCel">
      <h3>Centered horizontally and vertically</h3>
      <p>for all bootstrap versions with only two custom classes</p>
    </div>
  </div>
</div>

</body>
</html>

부트스트랩 4.1.3에서:

이것은 제가 부트스트랩 배지를 중앙에 두려고 할 때 효과가 있었습니다.container > row > column에 h1 함직

몇 가지 간단한 CSS가 작동했습니다.

.my-valign-center {
  vertical-align: 50%;
}

또는

<span class="badge badge-pill" style="vertical-align: 50%;">My Badge</span>

언급URL : https://stackoverflow.com/questions/42252443/vertical-align-center-in-bootstrap-4

'programing' 카테고리의 다른 글

프로그래밍 방식으로 Windows 10 개발자 모드 사용 (0)	2023.09.04
JQuery - 값을 기준으로 드롭다운 항목을 선택하는 방법 (0)	2023.08.30
AngularJS - Angular와 SOAP 서비스 통합JS 모델 (0)	2023.08.30
dbms_output이 boolean을 인쇄할 수 없습니까? (0)	2023.08.30
mariadb 10.2.26에서 기본 키 +10000으로 열(항상 생성됨)을 생성하려면 어떻게 해야 합니까? (0)	2023.08.30

현재글부트스트랩 4의 수직 정렬 중심

각종 프로그래밍 정보를 다루는 블로그입니다.

MariaDB, MongoDB, jQuery, reactjs, json, sql-server, angularJS, CSS, Spring-boot, typescript, wordpress, C, Android, Oracle, Git, asp.net, mysql, Ajax, python, Excel,

Today :
Yesterday :

instargram

부트스트랩 4의 수직 정렬 중심

부트스트랩 4의 수직 정렬 중심

'programing' 카테고리의 다른 글

'programing'의 다른글

티스토리툴바

« 2025/03 »
일	월	화	수	목	금	토
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30	31

부트스트랩 4의 수직 정렬 중심

부트스트랩 4의 수직 정렬 중심

'programing' 카테고리의 다른 글

'programing'의 다른글

관련글

티스토리툴바