부트 스트랩의 두 열 중간에 사각형 div를 중앙에 배치하는 방법은 무엇입니까?
공포 코더
두 개의 열이 연속으로 col-6있고 점보트론이 내 코드입니다.
<div class="jumbotron text-left" style="background-image: url(https://mdbootstrap.com/img/Photos/Others/gradient1.jpg); background-size: cover;">
<h1>Test</h1>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<p class="text-center square">TEST</p>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit </h3>
</div>
<div class="col-sm-6">
<h3>test</h3>
</div>
</div>
</div>
그리고 이것은 내 스타일입니다.
.square {
height: 50px;
width: 50px;
background-color: #9FB6A6;
border-radius: 3px;
}
그리고 이것이 제가 이루고 싶은 것입니다.
내가 시도한 것 :
나는 text-center클래스와 z-index. 문제는 스케치에서와 같이 점보트론을 통해 제곱 div를 얻을 수 없다는 것입니다.
여기에 jsfiddle이 있으므로 동작을 볼 수 있습니다.
https://jsfiddle.net/rmjy5pch/
누군가 나를 올바른 방향으로 가리킬 수 있습니까?
킹슬리 솔로몬
이와 같은 절대 위치를 사용하여이를 달성 할 수 있습니다.
https://jsfiddle.net/oqyzsxc3/3/
<body>
<div class="jumbotron text-left" style="background-image: url(https://mdbootstrap.com/img/Photos/Others/gradient1.jpg); background-size: cover;">
<h1>Test</h1>
</div>
<div class="container-fluid position-relative">
<div class="square-container text-center">
<p class=" square">TEST</p>
</div>
<div class="row">
<div class="col-sm-6">
<h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit </h3>
</div>
<div class="col-sm-6">
<h3>test</h3>
</div>
</div>
</div>
</body>
.square {
height: 50px;
width: 50px;
background-color: #9FB6A6;
border-radius: 3px;
margin: 0 auto;
}
.square-container {
position: absolute;
top: -60px;
width: 100%;
}
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
에서 수정
관련 기사
Related 관련 기사
- 1
두 개의 부트 스트랩 열 사이에 아이콘을 배치하는 방법은 무엇입니까?
- 2
3 열 Css Div 사이트를 중앙에 배치하는 방법은 무엇입니까?
- 3
두 개의 절대 div 사이에 div를 중앙에 배치하는 방법은 무엇입니까?
- 4
부트 스트랩에서 단계를 제대로 중앙에 배치하는 방법은 무엇입니까?
- 5
부트 스트랩 4.3.1을 사용할 때 페이지 중앙에 카드 열을 배치하는 방법은 무엇입니까?
- 6
부트 스트랩의 열을 중앙에 정렬하는 방법은 무엇입니까?
- 7
CSS와 Bootstrap을 사용하여 두 개의 텍스트를 중앙에 배치하는 방법은 무엇입니까?
- 8
부트 스트랩 3에서 div 중간에 버튼을 배치하는 방법은 무엇입니까?
- 9
부트 스트랩-내부에 텍스트가있는 div를 중앙에 배치하는 방법은 무엇입니까?
- 10
div 요소 내부에 텍스트를 중앙에 배치하는 방법은 무엇입니까?
- 11
div 내부에 CSS 스프라이트를 중앙에 배치하는 방법은 무엇입니까?
- 12
부트 스트랩, 이전 열의 중간에 열 스택을 만드는 방법은 무엇입니까?
- 13
내 사이트의 로고를 중앙에 배치하는 방법은 무엇입니까?
- 14
두 개의 div 버튼을 부트 스트랩 열의 중앙에 정렬 하시겠습니까?
- 15
회전하는 삼각형 스프라이트 안에 히트 박스를 중앙에 배치하는 방법은 무엇입니까?
- 16
구성 요소 내부에 텍스트를 중앙에 배치하는 방법은 무엇입니까?
- 17
부트 스트랩 3 진행률 표시 줄에서 텍스트를 중앙에 배치하는 방법은 무엇입니까?
- 18
부트 스트랩 행 중앙에 텍스트를 넣는 방법은 무엇입니까?
- 19
줄 높이가 0 인 div 텍스트 요소를 중앙에 배치하는 방법은 무엇입니까?
- 20
부트 스트랩을 잘 중앙에 배치하는 방법은 무엇입니까?
- 21
화면에서 부모 게임 오브젝트를 중앙에 배치하는 방법은 무엇입니까?
- 22
부트 스트랩 클래스가있는 div 사이에 여백을 두는 방법은 무엇입니까?
- 23
부트 스트랩, 모든 이미지를 중앙에 정렬하는 방법은 무엇입니까?
- 24
HStack을 두 개의 동일한 부분으로 나누고 각 부분의 중간에 이미지를 배치하는 방법은 무엇입니까?
- 25
부트 스트랩을 사용하여 목록 항목을 중앙에 배치하는 가장 좋은 방법은 무엇입니까?
- 26
부트 스트랩을 사용하여 목록 항목을 중앙에 배치하는 가장 좋은 방법은 무엇입니까?
- 27
열 사이에 중앙에 단일 테두리를 두는 방법은 무엇입니까?
- 28
고정 너비 컨테이너를 사용하지 않고 CSS를 사용하여 두 열을 중앙에 배치하는 방법은 무엇입니까?
- 29
두 버튼 사이에 TextView를 중앙에 배치하는 방법은 무엇입니까?
몇 마디 만하겠습니다