부트 스트랩 반응 형 페이지에서 div를 가운데에 배치하는 방법
아래 언급 된 레이아웃과 같이 페이지 중앙에 div를 배치하여 부트 스트랩을 사용하여 반응 형 페이지를 만들어야합니다.
부트 스트랩 4 업데이트
플렉스 박스로 더 간단한 수직 그리드 정렬
@import url('https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css');
html,
body {
height: 100%
}<div class="h-100 row align-items-center">
<div class="col" 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>모든 화면 크기에서 가로 및 세로 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
자녀를 세로 로 가운데에 맞추 려면 bootstrap-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 업데이트
이제 Bootstrap 4가 flexbox이므로 수직 정렬이 더 쉬워졌습니다. 전체 높이 flexbox div가 주어지면 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
디스플레이 테이블과 부트 스트랩없이, 오히려 그렇게 할 것입니다.
<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
좋은 답변 ppollono. 방금 놀고 있었고 약간 더 나은 해결책을 얻었습니다. 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에서 아무것도 변경하지 않아도 클래스에서 직접 작성할 수 있으며 결과를 얻을 수 있습니다.
<div class="col-lg-4 col-md-4 col-sm-4 container justify-content-center">
<div class="col" style="background:red">
TEXT
</div>
</div>
부트 스트랩으로 레이아웃을 수행하는 가장 간단한 방법은 다음과 같습니다.
<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>
all I did was to add layers of divs that allowed me to center the div, but since I am not using percentages, you need to specify the max-width of the div to be center.
You can use this same method to center more than one column, you just need to add more div layers:
<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>
Note: that I added a div with column 12 for md, sm and xs, if you don't do this the first div with background color (in this case "blueviolet") will collapse, you will be able to see the child divs, but not the background color.
For actual version of Bootstrap 4.3.1 use
Style
<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>
Code
<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
Not the best way ,but will still work
<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>
Here is simple CSS rules that put any div in the center
.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/
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;
}
참고 URL : https://stackoverflow.com/questions/20142606/in-a-bootstrap-responsive-page-how-to-center-a-div
'IT story' 카테고리의 다른 글
| 스위프트 : nil에 대한 옵션 테스트 (0) | 2020.07.13 |
|---|---|
| MySQL-SELECT WHERE field IN (하위 쿼리)-왜 느리게? (0) | 2020.07.13 |
| Jackson에서 Java 객체를 JsonNode로 변환 (0) | 2020.07.13 |
| 로컬 phpMyAdmin 클라이언트로 원격 서버에 액세스하는 방법은 무엇입니까? (0) | 2020.07.13 |
| JavaScript를 사용하여 HTML 요소에 속성을 추가 / 업데이트하는 방법은 무엇입니까? (0) | 2020.07.13 |