센터 양식 제출 버튼 html/css

내 HTML 양식을 CSS 중심으로 전송하는 데 문제가 있습니다.센터 양식 제출 버튼 html/css

지금은 누군가가 나를 도울 수있는이 CSS를

#btn_s{ 
    width:100px; 
    margin-left:auto; 
    margin-right:auto; 
} 

#btn_i { 
    width:125px; 
    margin-left:auto; 
    margin-right:auto; 
}

하고 아무것도 아니에요, 내가, 내가 아마 뭔가 바보 같은 잘못을하고있어 알고 함께

<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">

을 사용하고 있습니다?

감사

출처

2010-11-19 Belgin Fish

101

http://jsfiddle.net/SebastianPataneMasuelli/rJxQC/

난 그냥 그들 주위 사업부를 포장하고 중앙 정렬했다. 그러면 버튼을 가운데에 맞출 필요가 없습니다.

<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; }

출처

2010-11-19 01:14:59

실제로,이 솔루션의 단점은 그 홀더 DIV 센터 * 모든 것이 그 안에 *입니다 텍스트, 어린이 및 어린이의 자식을 포함하여 ... 전체 컨테이너를 중앙에 배치하지 않으려면 단일 요소에 'margin : 0 auto'를 사용하는 것이 일반적으로 더 좋습니다. 블록 요소. 그래도 때로는 이런 식으로 센터링을 사용합니다. 그래서 나부터 -0입니다. – vaxquis

CSS 스타일의 버튼 링크로 사용할 때 완벽하게 작동합니다. 을 div 및 클래스로 감싸면 다른 클래스에는 영향을주지 않고 완벽하게 작동합니다. – masmrdrr

고맙습니다. 간단하지만 매력처럼 작동합니다. –

이 시도 :

이

<!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>

이 2 예를 가지고, 당신은 당신의 상황에 가장 적합한 하나를 사용할 수 있습니다.

부모 컨테이너에서 text-align:center을 사용하거나이 컨테이너를 만듭니다.
컨테이너의 크기가 고정되어 있어야하는 경우에는 auto 왼쪽 및 오른쪽 여백을 사용하여 상위 컨테이너에 맞 춥니 다.

참고 : auto은 빈 공간을 왼쪽 및 오른쪽으로 분산시킴으로써 부모 공간에서 중앙에 배치하기 위해 단일 블록과 함께 사용됩니다.

출처

2010-11-19 01:19:31 SuperDuck

입력 요소는 기본적으로 인라인입니다. 적용 할 여백을 얻으려면 display:block을 추가하십시오. 그러나 버튼을 두 개의 분리 된 선으로 분리합니다. <div>과 text-align: center의 줄을 사용하여 다른 사람이 제안한대로 같은 줄에 가져옵니다.

출처

2010-11-19 01:31:28 Tom

나는 버튼이 같은 줄에서 서로 옆에 있다고 가정하고 있지만 '자동'여백을 사용하여 가운데에 정렬하지 않아야하며 여백이있는 정의 된 너비의 div 안에 배치해야합니다 '0 자동차'

CSS :

#centerbuttons{ 
    width:250px; 
    margin:0 auto; 
}

HTML (당신의 버튼 '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>

출처

2010-11-19 01:33:09 Annie

<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

출처

2014-02-17 23:16:55 kta

내가 여기 몇 가지 답변을 참조 확인 (추가 된 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; 
}

출처

2017-04-19 16:43:39

절대적으로 당신과 동의합니다, 이것이 최고의 해결책입니다, 감사합니다! +1 – stepik21

센터 양식 제출 버튼 html/css

답변

관련 문제