내 페이지 중앙에 html 버튼 정렬 시도 [중복]
이 질문에 이미 답변이 있습니다.
사용 된 브라우저에 관계없이 HTML 버튼을 페이지 중앙에 구축해야합니다. 세로 중앙에있는 동안 왼쪽으로 떠 페이지 상단과 같이 페이지의 어딘가에 있습니다.
나는 그것이 수직 및 수평 모두 있기 때문에 원합니다. 지금 제가 쓴 내용은 다음과 가변적입니다.
<button type="button" style="background-color:yellow;margin-left:auto;margin-right:auto;display:block;margin-top:22%;margin-bottom:0%">
mybuttonname
</button>
해결책은 다음과 가변합니다. JsFiddle
기본적으로 텍스트 가운데가있는 div에 버튼을 배치합니다.
<div class="wrapper">
<button class="button">Button</button>
</div>
다음 스타일로 :
.wrapper {
text-align: center;
}
.button {
position: absolute;
top: 50%;
}
고양이 피부를 만드는 데는 여러 가지 방법이 있으며 하나에 불고기합니다.
간단한 사용으로 text-align부모 div를 사용하지 않고 버튼을 중앙에 배치 할 수 있습니다.margin:auto; display:block;
예를 들면 :
HTML
<div>
<button>Submit</button>
</div>
CSS
button {
margin:auto;
display:block;
}
저는 최근 에 작업 display: table할 수 있도록 고정 된 크기를 제공 하기 위해 정말 margin: 0 auto노력했습니다. 내 인생을 훨씬 쉽게 만들었습니다. '테이블'디스플레이가 테이블 html을 의미하지 않는다는 사실을지나 치면됩니다.
특히 50 % 가이 값을 남기고 -50 %가 관리 할 수 없게되는 반응 형 디자인에 특히 유용합니다.
style
{
display: table;
margin: 0 auto
}
또한 두 개의 버튼이 버튼의 크기를 필요로하지 않습니다. 테이블이 마법처럼 버튼을 축소하기 때문입니다.
(이는 인라인이고 두 개의 버튼을 좌우로 가운데에 배치하려는 경우에도 작동합니다. 시도로 시도!)
이것을 시도하는 것은 매우 간단하며 .css 파일을 변경할 수 없습니다.
<p align="center">
<button type="button" style="background-color:yellow;margin-left:auto;margin-right:auto;display:block;margin-top:22%;margin-bottom:0%"> mybuttonname</button>
</p>
다음은 요청한 해결책입니다.
<button type="button" style="background-color:yellow;margin:auto;display:block">mybuttonname</button>동일한 문제를 해결하는 방법에는 여러 가지가 있습니다. PFB 2 개-
위치를 사용하는 첫 번째 방법 : 고정 -위치 : 고정; 즉, 페이지가 스크롤 되더라도 항상 같은 위치에 유지됩니다. left 및 top 값을 50 %에 더하면 화면 중앙에 배치됩니다.
button {
position: fixed;
left: 50%;
top:50%;
}
여백을 사용하는 두 번째 방법 : auto -margin : 0 auto; 수평 센터링의 경우, 여백 : 자동; 수직 센터링 작업을 거부했습니다… 지금까지! 그러나 실제로 절대 센터링에는 선언 된 높이와 다음 스타일 만 필요합니다.
button {
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
height: 40px;
}
나를 위해 그것은 flexbox를 사용하여 작동했습니다.
다음을 사용하여 부모 div / 요소 주위에 CSS 클래스를 추가합니다.
.parent {
display: flex;
}
버튼 사용 :
.button {
justify-content: center;
}
부모 div를 사용해야합니다. 그렇지 않으면 버튼이 페이지 / 요소의 중간이 무엇인지 '알지'못합니다.
다른 div 안에 배치하고 CSS를 사용하여 버튼을 가운데로 이동합니다.
<div style="width:100%;height:100%;position:absolute;vertical-align:middle;text-align:center;">
<button type="button" style="background-color:yellow;margin-left:auto;margin-right:auto;display:block;margin-top:22%;margin-bottom:0%">
mybuttonname</button>
</div>
다음은 예입니다. JsFiddle
100 % 너비와 100 % 높이로 모든 부모 요소를 만들고 display : table을 사용 합니다. 및 디스플레이 : 테이블 셀; , 작업 샘플을 확인하십시오.
<!DOCTYPE html>
<html>
<head>
<style>
html,body{height: 100%;}
body{width: 100%;}
</style>
</head>
<body style="display: table; background-color: #ff0000; ">
<div style="display: table-cell; vertical-align: middle; text-align: center;">
<button type="button" style="text-align: center;" class="btn btn-info">
Discover More
</button>
</div>
</body>
</html>
'IT' 카테고리의 다른 글
| Java 주석에서 코드의 위치 섹션을 표시하는 방법은 무엇입니까? (0) | 2020.09.11 |
|---|---|
| 바이트 배열에서 이미지로 변환 (0) | 2020.09.11 |
| Eclipse 프로젝트를 GitHub에 어떻게 업로드합니까? (0) | 2020.09.11 |
| Django 템플릿에서 마지막 루프 반복을 어떻게 확인합니까? (0) | 2020.09.11 |
| 여러 작업 그룹이있는 R의 정규식 그룹 (0) | 2020.09.11 |