中央フォーム送信ボタンhtml/css

私は、CSSでボタンを送信する私のHTMLフォームを心配している問題があります。中央フォーム送信ボタン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を包み、それが中央を揃えました。それらを中央に置くためにボタンに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; }

出典

2010-11-19 01:14:59

実際に、このソリューションの欠点は、そのホルダーのdivセンター*すべてはそれに*ですテキストや子供、子供たちの子供たちを含む...だから、コンテナ全体を中心にしたくないときは、通常、margin：0 autoを単一の要素に使う方が良いでしょう。指摘したように、ブロック要素。あなたが間違っていないので、時々私はこのようなセンタリングを使用するので、私から-0です... – vaxquis

私はCSSスタイルのボタンリンクのためにそれを使用すると完全に動作します。をdivとclassで囲むと、別のクラスに影響を与えることなく完全に動作するはずです。 – 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が左右に空きスペースをdistrubutingことによって、親スペースでそれらを中心に、単一のブロックで使用されていることに注意してください。

出典

2010-11-19 01:19:31 SuperDuck

入力要素はデフォルトでインラインです。余白を適用するには、display:blockを追加します。ただし、これはボタンを2つの別々の行に分割します。他の人に示唆されているように、<div>とtext-align: centerというラッピングを使用して、それらを同じ行に表示します。

出典

2010-11-19 01:31:28 Tom

私はボタンが同じ行にお互いに隣り合っていると仮定していますが、それらはそれぞれ 'auto'マージンを使って中央揃えにするのではなく、余白を持つ定義された幅'0オート'：

CSS：（あなたのボタンのCSSからのマージンプロパティを除去した後）

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

はHTML：

<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

答えて

関連する問題