私は、フォームボックスIは、フォームボックス&送信ボタンを中央に配置する方法をセンターのフォームボックスのCSS
<form method="GET">
<input type="text" name="q" class="input center search" />
<input type="submit" class="btn submit">
</form>
次のコードを持っていますか？私はmargin:auto、margin 0 autoとtext-align:centerを試しました。私は間違って何をしていますか？
）そのタグを消去します。私の解決策：
#form {
width: 200px;
margin-left: auto;
margin-right: auto;
}<form method="GET" id="form">
<input type="text" name="q" class="input center search" />
<input type="submit" class="btn submit">
</form>divに入力を入れてからtext-align:centerをdivに追加します。
あなただけの送信ボタンの前に<br/>を追加し、新しい行にボタンを提出したい場合は
.myInputs {
text-align: center;
}
form {
border: 1px solid black;
padding:20px;
}<form method="GET">
<div class="myInputs">
<input type="text" name="q" class="input center search" />
<input type="submit" class="btn submit">
</div>
</form>あなたは
form{
display:block;
text-align:center;
border:1px solid;
padding:10px;
}<form method="GET">
<input type="text" name="q" class="input center search" />
<input type="submit" class="btn submit">
</form>するかしないか。 「試行」はありません。 ***良い答え***は、何が行われたのか、それがなぜOPのためだけでなく、将来の訪問者のためにそうした方法で行われたのかについての説明を常に持っています。 –
実際のボックスの中にテキストを配置するという事実を取り除く方法はありますか？ –
それを入手しました。そして、テキストの中にセンタリングする必要はありません。センタリングされたテキストを削除するには、単に入力クラスを削除してください –
ちょうど、次のidを持つdivタグでフォームを追加行うことができます - セントへ
#inner{
\t display: table;
\t margin: auto;
}\t <div id="inner">
\t <form method="GET">
\t <input type="text" name="q" class="input center search" />
\t <input type="submit" class="btn submit">
\t </form>
\t </div>えーボックスは水平方向と垂直方向のあなたは、CSSコード
.input center search {
position: relative;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
だけ水平に
.input center search {
position: relative;
left: 50%;
transform: translate(-50%);
}
はdivにそれを入れて、下の設定を使用したコードを使用するボックスを中央に：
（私が下で行ったように、あなたがそれらを下にしたいならば、入力要素の間に<br>タグを加えることができます。ない場合は、単に余裕自動が機能するためには、あなたが特定の幅を指定する必要が
.x {
text-align: center;
}
form {
display: inline-block;
text-align: center;
}<div class="x">
<form method="GET">
<input type="text" name="q" class="input center search" />
<br>
<input type="submit" class="btn submit">
</form>
</div>これは完璧に動作します：
form{
display:block;
text-align:center;
width:450px;
margin: 0 auto;
}
input{
text-align:center;
display: block;
width:120px;
}
代わりに入力のdiv要素と使用内部の場所に、またはフォーム上のクラスを使用していませんinputは、フォームが子フォーム –
に加えて、オブジェクトの 'text-align：center'は機能しません。 –
私のソリューションはあなたの問題を解決する最も効果的な方法だと思います。 – Tinsten