부트스트랩 중앙 수직 및 수평 정렬

source

부트스트랩 중앙 수직 및 수평 정렬

manysource 2023. 10. 7. 12:01

부트스트랩 중앙 수직 및 수평 정렬

폼만 존재하는 페이지가 있는데 화면 중앙에 폼을 배치하고 싶습니다.

<div class="container">
  <div class="row justify-content-center align-items-center">
    <form>
      <div class="form-group">
        <label for="formGroupExampleInput">Example label</label>
        <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
      </div>
      <div class="form-group">
        <label for="formGroupExampleInput2">Another label</label>
        <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input">
      </div>
    </form>   
  </div>  
</div>

justify-content-center폼을 수평으로 정렬하는데 수직으로 정렬하는 방법을 알 수 없습니다.다를 .align-items-center그리고.align-self-center , .

제가 무엇을 빠뜨리고 있나요?

데모

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

부트스트랩 5는 여전히 플렉스박스 기반이므로 수직 센터링은 부트스트랩 4에서와 동일한 방식으로 작동합니다.예를들면,align-items-center행) 및 (Flex-direction:행))justify-content-center(flex-direction: 컬럼) 은 플렉스박스 상위(행 또는 d-flex) 에서 사용할 수 있습니다.

부트스트랩 5의 중심 예제

수직 중심(부모의 높이가 정의되어 있어야 함을 잊지 마십시오!

my-auto센터링 인사이드 플렉스(.d-flex)
my-auto열 가운데에 사용할 수 있습니다(.col-) 안에 row
align-items-center가운데 열(col-*) 안에 row

수평 중앙:

text-centerdisplay:inline& 열 &소
mx-auto
mx-auto열 가운데에 사용할 수 있습니다(.col-에 ) row
justify-content-center가운데 열(col-*에 ) row

부트스트랩 4.3+ (2019년 업데이트)

추가 CSS는 필요 없습니다.부트스트랩에 이미 포함되어 있는 것이 효과가 있을 것입니다.양식의 컨테이너가 전체 높이인지 확인합니다.부트스트랩 4는 이제h-100키 100%를 위한 수업...

수직 중심:

<div class="container h-100">
  <div class="row h-100 justify-content-center align-items-center">
    <form class="col-12">
      <div class="form-group">
        <label for="formGroupExampleInput">Example label</label>
        <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
      </div>
      <div class="form-group">
        <label for="formGroupExampleInput2">Another label</label>
        <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input">
      </div>
    </form>   
  </div>
</div>

https://codeply.com/go/raCutAGHre

물품이 중심에 있는 컨테이너의 높이는 100%여야 합니다(또는 원하는 높이가 중심에 있는 물품에 대한 것이라면).

시:height:100%(백분율 높이) 모든 요소에서 요소는 용기의 높이를 수용합니다.현대 브라우저에서 vh 단위height:100vh;다 대신 할 수 .%원하는 키를 얻기 위해서 입니다.

을(를) 하거나 새 html, {height:100%} 를(를) 할 수 min-vh-100다 대신 을 듣습니다.h-100.

수평 중앙:

text-centerdisplay:inline& 열 &소
mx-auto
offset-*아니면mx-auto열 가운데에 사용할 수 있습니다(.col-)
justify-content-center가운데 열(col-*에 ) row

부트 스트랩의 수직 정렬 중심 정렬
부트스트랩 4개 전체 화면 중심 폼
부트스트랩 4 센터 입력 그룹
부츠트랩 4 가로+세로 중앙 전체화면

나를 위한 일:

<section class="h-100">
  <header class="container h-100">
    <div class="d-flex align-items-center justify-content-center h-100">
      <div class="d-flex flex-column">
        <h1 class="text align-self-center p-2">item 1</h1>
        <h4 class="text align-self-center p-2">item 2</h4>
        <button class="btn btn-danger align-self-center p-2" type="button" name="button">item 3</button>
      </div>
    </div>
  </header>
</section>

플렉스박스가 당신을 도와줄수 있습니다. 여기에 정보가 있습니다.

<div class="d-flex flex-row justify-content-center align-items-center" style="height: 100px;">
    <div class="p-2">
     1
    </div>
    <div class="p-2">
     2
    </div>
</div>

부트스트랩에는 텍스트 가운데에 텍스트를 넣을 수 있는 text-center가 있습니다.예를들면

<div class="container text-center">

다음을 변경합니다.

<div class="row justify-content-center align-items-center">

이하에

<div class="row text-center">

양식의 중심을 잡을 무언가가 필요합니다.그러나 html과 본문의 높이를 지정하지 않았기 때문에 보기 포트가 아닌 내용만 래핑합니다.물건의 중심을 잡을 공간이 없었던 셈입니다.

html, body {
  height: 100%;
}
.container, .row.justify-content-center.align-items-center {
  height: 100%;
  min-height: 100%;
}

아무 것도 내게 통하지 않았습니다.하지만 그의 것은 그랬습니다.

이제 Bootstrap 4.row 클래스가 표시되므로 flex는 모든 열에서 새로운 align-self-center flexbox 유틸리티를 사용하여 수직 중심을 맞출 수 있습니다.

<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>

저는 https://medium.com/wdstack/bootstrap-4-vertical-center-1211448a2eff 을 통해 그것에 대해 배웠습니다.

사용하면서 아래 코드를 사용해 보십시오.v4아니면v5.

<div class="d-flex align-items-center justify-content-center" style="height:100vh;">
  Vertically and Horizontally Aligned :)
</div>

...아니면...사용할 경우 이 클래스를 사용할 수 있습니다.v5.

<div class="position-absolute top-50 start-50 translate-middle">
  Vertically and Horizontally Aligned :)
</div>

이렇게 하면 끝 :)

이것은 IE 11에서 부트스트랩 4.3으로 작동합니다.제 경우에는 IE11에서 다른 답변들이 작동하지 않았습니다.

 <div class="row mx-auto justify-content-center align-items-center flex-column ">
    <div class="col-6">Something </div>
</div>

부트스트랩 방식

HTML

 <div class="row top-row">
        <div class="col center-text">
            <H1>Center Text Horizantally and vertically</H1>
        </div>
</div>

사용자 지정 CSS

  .top-row{
        height: 300px; //It's important to set height 
    }
  .center-text{
       display: flex;
       align-items: center;
       justify-content: center;
    }

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <div class="col-12 border border-info">
          <div class="d-flex justify-content-center align-items-center" style="height: 100px">
              <a href="#" class="btn btn-dark">Transfer</a>
              <a href="#" class="btn btn-dark mr-2 ml-2">Replenish</a>
              <a href="#" class="btn btn-dark mr-3">Account Details</a>
          </div>
    </div>

페이지에 중심을 둔 양식을 얻기 위해 많은 게시물을 작성했지만 아무 것도 작동하지 않았습니다.아래 코드는 부트스트랩 4.1을 사용한 반응 구성 요소에서 나온 것입니다. 높이는 100vh여야 하며 100%가 아니어야 합니다.

<div className="container">
      <div className="d-flex justify-content-center align-items-center" style={height}>
        <form>
          <div className="form-group">
            <input className="form-control form-control-lg" placeholder="Email" type="email"/>
          </div>
          <div className="form-group">
            <input className="form-control form-control-lg" placeholder="Password" type="password"/>
          </div>
          <div className="form-group">
            <button className="btn btn-info btn-lg btn-block">Sign In</button>
          </div>
        </form>
      </div>
    </div>

스타일의 높이는 다음과 같습니다.

const 높이 = { 높이: '100vh' }

부트스트랩 v5.0부터는 다음과 같습니다.

<div class="position-absolute top-50 start-50 translate-middle">
   centred
</div>

부트스트랩 4 그리드 시스템과 Angular *ngFor 루프에 문제가 있어서 여기에 오게 되었습니다.ngFor를 구현하는 div에 col justice-content-center 클래스를 적용하여 수정했습니다.

<div class="row" style="border:1px solid red;">
  <div class="col d-flex justify-content-center">
    <button mat-raised-button>text</button>
  </div>
  <div *ngFor="let text of buttonText" class="col d-flex justify-content-center">
    <button mat-raised-button>text</button>
  </div>
</div>

결과는 다음과 같습니다.

저는 컨테이너 유체 내부에 수직 중심의 형태를 보여야 하기 때문에 그에 대한 자체 코드를 개발했습니다.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <style>
       .container-fluid
       {
            display: table-cell;
            height: 100vh;
            width: 100vw !important;
            vertical-align: middle;
            border:1px solid black;
       }
    </style>
</head>

<body>
    <div class="container-fluid">
        <div class="row">
            <div class="col-8 offset-2">
                <div class="card shadow">
                    <div class="card-header bg-danger text-white">
                        <h2>Login</h2>
                    </div>

                    <div class="card-body">
                        <form action="">
                            <div class="form-group row">
                                <label for="txtemail" class="col-form-label col-sm-2">Email</label>
                                <div class="col-sm-10">
                                    <input type="email" name="txtemail" id="txtemail" class="form-control" required />
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="txtpassword" class="col-form-label col-sm-2">Password</label>
                                <div class="col-sm-10">
                                    <input type="password" name="txtpassword" id="txtpassword" class="form-control"
                                        required />
                                </div>
                            </div>
                            <div class="form-group">
                                <button class="btn btn-danger btn-block">Login</button>
                                <button class="btn btn-warning btn-block">clear all</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <script src="js/jquery.js"></script>
        <script src="js/popper.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
</body>

</html>

CSS에서 이 코드 사용:

.container {
    width: 600px;
    height: 350px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: inline-flex;
}

문서(부츠랩 4):

https://getbootstrap.com/docs/4.0/utilities/flex/ # justify-content

.justify-content-start
.justify-content-end
.justify-content-center
.justify-content-between
.justify-content-around
.justify-content-sm-start
.justify-content-sm-end
.justify-content-sm-center
.justify-content-sm-between
.justify-content-sm-around
.justify-content-md-start
.justify-content-md-end
.justify-content-md-center
.justify-content-md-between
.justify-content-md-around
.justify-content-lg-start
.justify-content-lg-end
.justify-content-lg-center
.justify-content-lg-between
.justify-content-lg-around
.justify-content-xl-start
.justify-content-xl-end
.justify-content-xl-center
.justify-content-xl-between
.justify-content-xl-around

부츠트랩 5

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

https://getbootstrap.com/docs/5.1/examples/sign-in/

부츠트랩스m-auto당신의 친구입니다!

컨텐츠를 중간에 일시 중단하려는 상위 컨테이너가 있는 경우, , 및 다음만 필요합니다.

<div class="h-100 d-flex">
  <div class="m-auto">
    Content
  </div>
</div>

외부 용기는 어떤 용기에 존재하든 크기만큼 부풀게 되고, 내부 용기는auto각 변에 설정된 여백이 부모의 중심에 놓이게 합니다.

div > div { border: 1px solid red; }
div { border: 1px solid blue; }
body { border: 1px dashed orange; }

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5/dist/css/bootstrap.min.css">

<body class="m-2" style="width: 600px; height: 150px;">
  <div class="h-100 d-flex">
    <div class="m-auto">
      This content is centered<br>
      both vertically and horizontally<br>
      in its container
    </div>
  </div>
</body>

(문서 본문이 주황색으로 점철된 경우,<div>컨테이너는 파란색, 하위 컨테이너는 빨간색입니다.)

언급URL : https://stackoverflow.com/questions/42388989/bootstrap-center-vertical-and-horizontal-alignment

'source' 카테고리의 다른 글

R Studio를 이용한 digital ocean의 mariaDB 연결 (0)	2023.10.07
스프링 - applicationContext.xml이 없으므로 열 수 없습니다. (0)	2023.10.07
와의 차이점은 무엇입니까?값 = " " 및 .내용 지우기? (0)	2023.10.07
테이블에 ON DELETE 제약 조건을 추가하려면 어떻게 해야 합니까? (0)	2023.10.07
이 C 코드의 취약한 점은 무엇입니까? (0)	2023.10.07

현재글부트스트랩 중앙 수직 및 수평 정렬

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

jQuery, sql-server, JSON, ajax, JavaScript, MySQL, mariadb, MongoDB, Python, Excel, Oracle, reactjs, Java, angularJS, Wordpress, css, Git, php, C, spring-boot,

Today :
Yesterday :

일	월	화	수	목	금	토
					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

manysource

부트스트랩 중앙 수직 및 수평 정렬

부트스트랩 중앙 수직 및 수평 정렬

'source' 카테고리의 다른 글

'source'의 다른글

티스토리툴바

부트스트랩 중앙 수직 및 수평 정렬

부트스트랩 중앙 수직 및 수평 정렬

'source' 카테고리의 다른 글

'source'의 다른글

관련글

티스토리툴바