중앙 양식 제출 버튼 HTML / CSS
CSS에서 HTML 양식 제출 버튼을 중앙에 배치하는 데 문제가 있습니다.
지금은 다음을 사용하고 있습니다.
<input value="Search" title="Search" type="submit" id="btn_s">
<input value="I'm Feeling Lucky" title="I'm Feeling Lucky" name="lucky" type="submit" id="btn_i">
이 CSS 콘텐츠로
#btn_s{
width: 100px;
margin-left: auto;
margin-right: auto;
}
#btn_i {
width: 125px;
margin-left: auto;
margin-right: auto;
}
그리고 그것은 아무것도하지 않습니다. 나는 내가 어리석은 잘못을하고 있다는 것을 알고있다. 이 문제를 어떻게 해결할 수 있습니까?
http://jsfiddle.net/SebastianPataneMasuelli/rJxQC/
방금 div를 감싸고 중앙에 정렬했습니다. 그러면 중앙에 단추에 CSS가 필요하지 않습니다.
<div class="buttonHolder">
<input value="Search" title="Search" type="submit" id="btn_s">
<input value="I'm Feeling Lucky" title="I'm Feeling Lucky" name="lucky" type="submit" id="btn_i">
</div>
.buttonHolder{ text-align: center; }
입력 요소는 기본적으로 인라인입니다. display:block적용 할 여백을 얻으려면 추가하십시오 . 그러나 이렇게하면 버튼이 두 개의 개별 줄로 나뉩니다. 다른 사람들이 제안한대로 포장 <div>을 사용 text-align: center하여 같은 줄에 배치하십시오.
여기에 몇 가지 답변이 있습니다. 대부분은 복잡하거나 단점이 있습니다 (추가 div, 텍스트 정렬은 디스플레이로 인해 작동하지 않음 : 인라인 블록). 이것이 가장 간단하고 문제가없는 솔루션이라고 생각합니다.
HTML :
<table>
<!-- Rows -->
<tr>
<td>E-MAIL</td>
<td><input name="email" type="email" /></td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="Register!" /></td>
</tr>
</table>
CSS :
table input[type="submit"] {
display: block;
margin: 0 auto;
}
이 시도 :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<head>
<style type="text/css">
#btn_s{
width:100px;
}
#btn_i {
width:125px;
}
#formbox {
width:400px;
margin:auto 0;
text-align: center;
}
</style>
</head>
<body>
<form method="post" action="">
<div id="formbox">
<input value="Search" title="Search" type="submit" id="btn_s">
<input value="I'm Feeling Lucky" title="I'm Feeling Lucky" name="lucky" type="submit" id="btn_i">
</div>
</form>
</body>
여기에는 두 가지 예가 있으며 상황에 가장 적합한 예를 사용할 수 있습니다.
- 사용
text-align:center부모 컨테이너에, 또는 이것에 대한 컨테이너를 만듭니다. - 컨테이너의 크기가 고정되어야하는 경우
auto왼쪽 및 오른쪽 여백을 사용 하여 상위 컨테이너의 중앙에 놓습니다.
참고 auto하나의 블록으로 사용되는 왼쪽과 오른쪽에있는 빈 공간을 distrubuting하여 부모 공간을 중앙에.
<style>
form div {
width: 400px;
border: 1px solid black;
}
form input[type='submit'] {
display: inline-block;
width: 70px;
}
div.submitWrapper {
text-align: center;
}
</style>
<form>
<div class='submitWrapper'>
<input type='submit' name='submit' value='Submit'>
</div>
이 jsfiddle 도 확인하십시오.
I'm assuming that the buttons are supposed to be next to each other on the same line, they should not each be centered using the 'auto' margin, but placed inside a div with a defined width that has a margin '0 auto':
CSS:
#centerbuttons{
width:250px;
margin:0 auto;
}
HTML (after removing the margin properties from your buttons' CSS):
<div id="centerbuttons">
<input value="Search" title="Search" type="submit">
<input value="I'm Feeling Lucky" title="I'm Feeling Lucky" name="lucky" type="submit">
</div>
One simple solution if only one button needs to be centered is something like:
<input type='submit' style='display:flex; justify-content:center;' value='Submit'>
You can use a similar style to handle several buttons.
/* here is what works for me - set up as a class */
.button {
text-align: center;
display: block;
margin: 0 auto;
}
/* you can set padding and width to whatever works best */
참고URL : https://stackoverflow.com/questions/4221263/center-form-submit-buttons-html-css
'Program Club' 카테고리의 다른 글
| webdesign-웹에 가장 적합한 jpg 또는 png (0) | 2020.11.19 |
|---|---|
| Mac 터미널 Vim은 줄 끝에서만 백 스페이스를 사용합니다. (0) | 2020.11.19 |
| 벡터 지우기 반복기 (0) | 2020.11.19 |
| Express에서 경로 일치를위한 정규식 (0) | 2020.11.19 |
| IntelliJ IDEA의 변경 목록은 무엇입니까? (0) | 2020.11.18 |