programing

부트스트랩 응답 페이지에서 디브의 중심을 맞추는 방법

cafebook 2023. 10. 10. 20:58
반응형

부트스트랩 응답 페이지에서 디브의 중심을 맞추는 방법

position a div at centre of a responsive page

아래 레이아웃과 같이 페이지 중앙에 div를 위치시켜 부트스트랩을 이용한 응답 페이지를 만들어야 합니다.

부트스트랩 5용 업데이트

flex-box로 보다 단순한 수직 그리드 정렬

@import url('https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.1/css/bootstrap.min.css');
html,
body {
  height: 100%
}
<div class="h-100 d-flex align-items-center justify-content-center">
  <div style="background:red">
    TEXT
  </div>
</div>

부트스트랩용 솔루션 4

flex-box로 보다 단순한 수직 그리드 정렬

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css');
html,
body {
  height: 100%
}
<div class="h-100 d-flex align-items-center justify-content-center">
  <div style="background:red">
    TEXT
  </div>
</div>

부트스트랩용 솔루션 3

@import url('http://getbootstrap.com/dist/css/bootstrap.css');
 html, body, .container-table {
    height: 100%;
}
.container-table {
    display: table;
}
.vertical-center-row {
    display: table-cell;
    vertical-align: middle;
}
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>

<div class="container container-table">
    <div class="row vertical-center-row">
        <div class="text-center col-md-4 col-md-offset-4" style="background:red">TEXT</div>
    </div>
</div>

모든 화면 크기에 초점을 맞춘 가로 세로 디브의 간단한 예입니다.

CSS:

html,
body {
    height: 100%;
}

.container {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

HTML:

<div class="container">
  <div>
    example
  </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;">
    <div class="bg-primary">MIDDLE</div>    
</div>

참고: 이 코드가 작동하지 않을 경우 부트스트랩-4 유틸리티를 추가해야 합니다.

부트스트랩 4용 업데이트

이제 부트스트랩 4가 플렉스박스이므로 수직 정렬이 더 쉬워졌습니다.my-auto위아래로 짝수로...

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

http://codeply.com/go/ayraB3tjSd/bootstrap-4-vertical-center

부트 스트랩의 수직 중앙 4

을 맞추기 세 div 의을 div 합니다.ml-0 mr-0 mx-auto

아래의 간단한 예를 보면 중심이 어떻게 잡히는지 알 수 있습니다.

<div class="bg-primary w-50 ml-0 mr-0 mx-auto text-center">
      Center
</div>

CSS에서는 아무것도 바꿀 필요가 없고 수업시간에 직접 작성하면 결과가 나옵니다.

<div class="col-lg-4 col-md-4 col-sm-4 container justify-content-center">
  <div class="col" style="background:red">
    TEXT
  </div>
</div>

enter image description here

진열대도 없고 부츠트랩도 없으면 차라리 그렇게 하겠습니다.

<div class="container container-table">
    <div class="row vertical-center-row">
        <div class="text-center col-md-4 col-md-offset-4" style="background:red">TEXT</div>
    </div>
</div>


 html, body, .container-table {
    height: 100%;
}
.container-table {
    width:100vw;
  height:150px;
  border:1px solid black;
}
.vertical-center-row {
   margin:auto;
  width:30%;
  padding:63px;
  text-align:center;

}

http://codepen.io/matoeil/pen/PbbWgQ

부트스트랩 4에서 다음을 사용합니다.

<div class="d-flex justify-content-center">...</div>

원하는 위치에 따라 위치를 변경할 수도 있습니다.

<div class="d-flex justify-content-start">...</div>
<div class="d-flex justify-content-end">...</div>
<div class="d-flex justify-content-between">...</div>
<div class="d-flex justify-content-around">...</div>

여기참조

body{
    height: 100vh;
} 
.container{
    height: 100%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>


<div class="container text-center d-flex align-items-center justify-content-center">
        <div>
            <div>
                <h1>Counter</h1>
            </div>
            <div>
                <span>0</span>
            </div>
            <div>
                <button class="btn btn-outline-primary">Decrease</button>
                <button class="btn btn-danger">Reset</button>
                <button class="btn btn-outline-success">Increase</button>
            </div>
        </div>
    </div>

당신도 그렇게 할 수 있습니다.

좋은 답변 폴로노.그냥 장난치다가 조금 더 나은 해결책을 얻었어요.CSS는 동일하게 유지됩니다. 즉:

html, body, .container {
    height: 100%;
}
.container {
    display: table;
    vertical-align: middle;
}
.vertical-center-row {
    display: table-cell;
    vertical-align: middle;
}

그러나 HTML의 경우:

<div class="container">
    <div class="vertical-center-row">
        <div align="center">TEXT</div>
    </div>
</div>

이 정도면 충분합니다.

여기에 어떤 디브라도 중앙에 넣는 간단한 CSS 규칙이 있습니다.

.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

https://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/

부트스트랩으로 레이아웃을 구현하는 가장 간단한 방법은 다음과 같습니다.

<section>
<div class="container">
    <div class="row">
        <div align="center">
            <div style="max-width: 200px; background-color: blueviolet;">
                <div>
                    <h1 style="color: white;">Content goes here</h1>
                </div>
            </div>
        </div>
    </div>
</div>

제가 한 일은 디브의 중심을 잡을 수 있는 디브 레이어를 추가하는 것이었는데, 저는 퍼센티지를 사용하지 않기 때문에 디브의 최대 너비를 중심으로 지정해야 합니다.

이와 같은 방법을 사용하여 두 개 이상의 열의 중심을 잡을 수 있으며, 더 많은 분할자를 추가하기만 하면 됩니다.

<div class="container">
    <div class="row">
        <div align="center">
            <div style="max-width: 400px; background-color: blueviolet;">
                <div class="col-md-12 col-sm-12 col-xs-12" style="background-color: blueviolet;">
                    <div class="col-md-8 col-sm-8 col-xs-12" style="background-color: darkcyan;">
                        <h1 style="color: white;">Some content</h1>
                    </div>
                    <div class="col-md-4 col-sm-4 col-xs-12" style="background-color: blue;">
                        <p style="color: white;">More content</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

참고: md, sm 및 xs 열 12가 있는 디브를 추가했습니다. 이렇게 하지 않으면 배경색(이 경우 "블루바이올렛")이 있는 첫 번째 디브가 무너지지만 배경색은 볼 수 없습니다.

부트스트랩 4.3.1의 실제 버전의 경우 사용

스타일.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<style type="text/css">
html, body {
    height: 100%;
}
</style>

코드

<div class="h-100 d-flex justify-content-center">
<div class="jumbotron my-auto">
<!-- example content -->
<div class="alert alert-success" role="alert">
<h4 class="alert-heading">Title</h4>
<p>Desc</p>
</div>
<!-- ./example content -->
</div>
</div

최선의 방법은 아니지만 그래도 효과는 있을 것입니다.

<div class="container-fluid h-100">
<div class="row h-100">
<div class="col-lg-12"></div>
<div class="col-lg-12">
<div class="row h-100">
  <div class="col-lg-4"></div>
  <div class="col-lg-4 border">
    This div is in middle
  </div>
  <div class="col-lg-4"></div>
</div>

</div>
<div class="col-lg-12"></div>
</div>

</div>

예를 들어, 고정된 키를 사용했습니다.반응성 시나리오에는 영향을 주지 않는 것 같습니다.

<html lang="en">
<head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
    <div class="d-flex justify-content-center align-items-center bg-secondary w-100" style="height: 300px;">
        <div class="bg-primary" style="width: 200px; height: 50px;"></div>
    </div>
</body>
</html>

클래스를 삽입하기만 하면 됩니다.d-flex justify-content-center당신이 원하는 디브에게.그런;

<div class="d-flex justify-content-center">
    <img src="asf" alt="text" >
</div>

참고: 부트스트랩 5를 사용하는 경우에만 작동합니다.

https://getbootstrap.com/docs/4.0/utilities/flex/ 을 사용하여 다음 코드를 취했습니다. 자세한 내용은 팔로우 해주세요.

고마워요!

여기 사용되고 작동된 토막글이 있습니다.

<div class="container-fluid py-5 h-100">
  <div class="row d-flex justify-content-center align-items-center h-100">
        <div class="col col-md-8">
            <div class="card"></div>
        </div>
  </div>
</div>


<div class="d-flex justify-content-center align-items-center vh-100">
<div class="bg-danger text-white">Hello</div>
</div>

jsFiddle

HTML:

<div class="container" id="parent">
  <div class="row">
    <div class="col-lg-12">text
      <div class="row ">
        <div class="col-md-4 col-md-offset-4" id="child">TEXT</div>
      </div>
    </div>
  </div>
</div>

CSS:

#parent {    
    text-align: center;
}
#child {
    margin: 0 auto;
    display: inline-block;
    background: red;
    color: white;
}

가장 간단한 해결책은 아래와 같이 양쪽에 하나의 빈 열을 추가하는 것입니다.

  <div class="row form-group">

    <div class="col-3"></div>

    <ul class="list-group col-6">
      <li class="list-group-item active">Yuvraj Patil</li>
    </ul>

    <div class="col-3"></div>
  </div>

언급URL : https://stackoverflow.com/questions/20142606/in-a-bootstrap-responsive-page-how-to-center-a-div

반응형

'programing' 카테고리의 다른 글

요청 본문이 KOA에 정의되지 않았습니다.  (0) 2023.10.15
C/C++ 다차원 배열 초기화 시 크기 생략  (0) 2023.10.15
서비스 중인 Document를 주입하는 방법은 무엇입니까?  (0) 2023.10.10
PHP 코드의 속도가 느려지는 위치를 확인합니다(성능 문제).  (0) 2023.10.10
현재 분기의 단일 파일을 메인 분기의 동일한 파일로 덮어쓰시겠습니까?  (0) 2023.10.10

'programing'의 다른글

  • 현재글부트스트랩 응답 페이지에서 디브의 중심을 맞추는 방법

관련글

댓글

티스토리툴바