web-dev-qa-db-ja.com

センターフォーム送信ボタン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;
}

そして、それは何もしていません。私はおそらく愚かな間違ったことをしていることを知っています。どうすれば修正できますか？

htmlcsscenteralignment
64
Belgin Fish

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; }
119
Sebastian Patane Masuelli

入力要素はデフォルトでインラインです。 display:blockを追加して、適用するマージンを取得します。ただし、これによりボタンが2行に分割されます。同じ行にそれらを取得するために、他の人が提案するように、ラッピング<div>とtext-align: centerを使用します。

29
Tom

ここにはいくつかの答えがありますが、それらのほとんどは複雑であるか、いくつかの短所があります（追加のdiv、text-alignは表示のために機能しません：インラインブロック）。私はこれが最も簡単で問題のないソリューションだと思う：

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;
}
12
Adrian Adamczyk

これを試して ：

<!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は単一のブロックで使用され、空のスペースを左右に分散させることで親スペースの中央に配置されることに注意してください。

6
SuperDuck
<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

1
kta

私はボタンが同じ行で互いに隣り合うはずであると仮定しています、それらはそれぞれ「自動」マージンを使用して中央に置かれるべきではなく、マージン「0 auto」を持つ定義された幅を持つdiv内に配置されるべきです：

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>
1
Annie

ボタンを1つだけ中央に配置する必要がある場合の簡単な解決策は、次のようなものです。

<input type='submit' style='display:flex; justify-content:center;' value='Submit'>

同様のスタイルを使用して 複数のボタン を処理できます。

0
Nagev
/* 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 */
0
Dave Taitelbaum