DIV 내부의 버튼 중앙에 배치
댄 제임스 팔머
DIV 내부의 버튼을 중앙에 배치하는 데 문제가 있습니다.
현재 얻은 결과는 다음과 같습니다.
HTML은 다음과 같습니다.
<div id="buttonDiv">
<div class="button">
<button type="submit" onClick="setSid()">Click here to Start Test</button>
</div>
</div>
CSS는 다음으로 구성됩니다.
#buttonDiv {
position: fixed;
width:200px;
height:200px;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
border-bottom-width:1px;
border-top-width:1px;
border-right-width:1px;
border-left-width:1px;
border-style:solid;
border-color:#000000;
}
.button {
display:table-cell;
align-content:center;
vertical-align:middle;
}
이 경로는 텍스트에는 작동하지만 버튼에는 작동하지 않는 것 같습니다. 기쁨없이 버튼에 직접 클래스를 추가해 보았습니다.
감사
Mattdevio
부모 컨테이너에 텍스트 정렬 중앙을 추가하면 버튼이 수평 중앙에 배치됩니다. 그런 다음 상단을 사용할 수 있습니다 : 50 %; 변환 : translateY (-50 %); 수직으로 중앙에 트릭.
HTML
<div id="buttonDiv">
<button type="submit" onClick="setSid()">Click here to Start Test</button>
</div>
CSS
#buttonDiv {
position: fixed;
width:200px;
height:200px;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
border-bottom-width:1px;
border-top-width:1px;
border-right-width:1px;
border-left-width:1px;
border-style:solid;
border-color:#000000;
text-align:center;
}
button {
position:relative;
top: 50%;
transform: translateY(-50%);
}
아래 수정
'.button'div를 유지해야하는 경우 상단을 이동할 수 있습니다 : 50 %; 변환 : translateY (-50 %); 그 수업에.
HTML
<div id="buttonDiv">
<div class="button">
<button type="submit" onClick="setSid()">Click here to Start Test</button>
</div>
</div>
CSS
#buttonDiv {
position: fixed;
width:200px;
height:200px;
top: 50%;
left: 50%;
margin: -100px 0px 0px -100px;
border: 1px solid #000;
text-align:center;
}
.button {
position:relative;
top: 50%;
transform: translateY(-50%);
}
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
에서 수정
관련 기사
Related 관련 기사
- 1
div 내 중앙에 <a> 버튼
- 2
div 내 중앙에 버튼
- 3
Android의 버튼 내부 텍스트 중앙에 배치
- 4
테이블 내부에 입력 버튼을 중앙에 배치
- 5
div 내부의 배경 이미지 중앙에 배치
- 6
Bootstrap 열 내부의 div 중앙에 배치
- 7
div 내에서 표 중앙에 배치
- 8
div 내부 (V, H) div를 중앙에 배치하는 방법
- 9
React Bootstrap의 모달 제목 및 버튼 중앙에 배치
- 10
두 버튼 사이의 뷰 중앙에 배치
- 11
같은 위치에있는 자식 div 내부의 버튼
- 12
부트 스트랩 : div 내에서 헤더 중앙에 배치
- 13
div 내부의 이미지를 중앙에 배치 할 수 없습니다.
- 14
부트 스트랩 div 내부에 부트 스트랩 버튼 배치
- 15
div 내에서 ul 중앙에 배치 (이미 페이지 중앙에 있음)
- 16
바닥 글 내부의 두 부동 div 사이에 인라인 블록 div 중앙에 배치
- 17
css는 중앙과 중앙의 div에 배경이있는 범위를 배치
- 18
내비게이션 바에서 버튼을 중앙에 배치하는 방법
- 19
div를 중앙에 배치
- 20
div를 중앙에 배치
- 21
HTML CSS-내 페이지 중앙에 버튼을 배치하는 방법
- 22
부트 스트랩 4를 사용하여 양식 내부에 버튼을 중앙에 배치하는 방법
- 23
중앙 비디오 옆의 나머지 공간에 버튼을 중앙에 배치하는 방법
- 24
내 버튼을 중앙에 어떻게 배치합니까? 내 첫 번째 버튼에 따라
- 25
SVG 차트에서 HTML div 오버레이 중앙에 배치
- 26
html 및 css의 다른 div 내부에 div를 수직 및 수평으로 중앙에 배치
- 27
라디오 버튼 내부에 큰 점을 중앙에 배치 할 수 없습니다.
- 28
div 내부의 다른 요소는 무시하면서 텍스트를 div 중앙에 배치
- 29
div 내에서 양식 중앙에 배치
몇 마디 만하겠습니다