提出ボタンをCSSの中央に配置するにはどうすればいいですか？

Question

私はフォームを作成しています。すべてのテキストボックスを並べて、送信ボタンを中央に配置したいと思います。これらは、Iが与えられた方向であった：

はパディングconfigureと入力要素の 適切な量を設定8emの右アサイン幅にブロック ディスプレイセットのテキストの配置及び textarea要素で左に浮動するラベル要素セレクタを作成します

form{ 
 
\t float:left; 
 
\t display:block; 
 
\t text-align:right; 
 
\t width:8em; 
 
} 
 
input { 
 
    display: block; 
 
    margin-bottom:1em; 
 
} 
 
textarea#feedback { 
 
    display: block; 
 
    margin-bottom:1em; 
 
} 
 
.form{ 
 
margin-left: 12em; 
 
}

<form role="form"> 
 
<div class="form"> 
 
<form> 
 
<label for="Name">Name*</label> 
 
    <input type="form" name="Name" id="" value="" required><br> 
 
    <label for="Email">Email*</label> 
 
    <input type="email" name="email" id= value"" required> \t <br> 
 
    <label for="Experience">Experience*</label> 
 
    <textarea rows="2" cols="20"> 
 
    </textarea><br> 
 
    <input type="submit" value="Apply Now"> 
 
    </div> 
 
</form>

：12em下マージンここ

のブロック表示とセレクタは私がこれまで持っているコードです。

私は私のCSSで何が間違っているのか分かりません。私はパディングと余白を変更しようとしましたが、何も機能しませんでした。私のコードから何が欠けていますか？どんなフィードバックも高く評価されます。

Answer 1

は作業フィドルです：https://jsfiddle.net/qptgsc1e/

ちょっとした変更点、このCSSとHTMLを置き換えてください。あなたが見たい場合は

は、コードの変更は、それがhere

form{ 
float:left; 
display:block; 
width:50%; 
} 
input { 
display: block; 
margin-bottom:1em; 
width: 50%; 
} 
input[type='submit']{ 
width:30%; 
margin:0 auto; 
} 
textarea#feedback { 
display: block; 
margin-bottom:1em; 
width:50%; 
} 
.submit-wrap{ 
width:50%; 
} 


<form role="form"> 
<div class="form"> 
<form> 
<label for="Name">Name*</label> 
<input type="form" name="Name" id="" value="" required><br> 
<label for="Email">Email*</label> 
<input type="email" name="email" id= value"" required> <br> 
<label for="Experience">Experience*</label><br> 
<textarea rows="2" id="feedback"> 
</textarea><br> 
<div class="submit-wrap"><input type="submit" value="Apply Now"></div> 
</div> 
</form> 

Answer 2

このスタイルが有効かどうかを確認します。

form{ 
 
float:left; 
 
display:block; 
 
/* text-align:right; */ 
 
width:8em; 
 
margin-left: 12em; 
 
min-width: 180px; 
 
} 
 
input, textarea{ 
 
    min-width: 180px; 
 
} 
 
label{ 
 
    display: block; 
 
} 
 
input { 
 
    display: block; 
 
    margin-bottom:1em; 
 
} 
 
input[type="submit"]{ 
 
    display: block; 
 
    margin: auto; 
 
    width: auto; 
 
    min-width: 50px; 
 
} 
 
textarea#feedback { 
 
    display: block; 
 
    margin-bottom:1em; 
 
}

<form role="form"> 
 
<div class="form"> 
 
<form> 
 
<label for="Name">Name*</label> 
 
    <input type="form" name="Name" id="" value="" required><br> 
 
    <label for="Email">Email*</label> 
 
    <input type="email" name="email" id= value"" required> \t <br> 
 
    <label for="Experience">Experience*</label> 
 
    <textarea rows="2" cols="20"> 
 
    </textarea><br> 
 
    <input type="submit" value="Apply Now"> 
 
    </div> 
 
</form>

Answer 3

送信ボタンにスタイルを含めてください。

<input type="submit" value="Apply Now" style="margin:0 auto;"> 

は参照してください：center form submit buttons html/css

Answer 4

まず、あなたのHTMLを固定して開始できます。

この行の形式が正しくありません。

<input type="email" name="email" id= value"" required> <br> 

であるために

<input type="email" name="email" id="" value="" required> <br> 

する必要があります。

<form role="form"> 
    <div class="form"> 
    <form> 
    <label for="Name">Name*</label><br> 
    <input type="form" name="Name" id="" value="" required> 
    <label for="Email">Email*</label><br> 
    <input type="email" name="email" id="" value="" required> 
    <label for="Experience">Experience*</label><br> 
    <textarea rows="2" cols="20"></textarea><br> 
    <input type="submit" value="Apply Now"> 
    </div> 
    </form> 

これで固定と同様に間隔が設定されましたので、送信ボタンの中央揃えを開始できます。

今、私たちはdiv要素

<div class="buttonHolder"> 
<input type="submit" value="Apply Now"> 
</div> 

で送信ボタンを次に残っていることはすべてのdivのスタイルをあるラップします、あなたは今までの方法最高の余白、テキスト整列などをお探している、これを行うことができます

.buttonHolder{ text-align: center; } 

決勝HTML：ここ

<form role="form"> 
<div class="form"> 
<form> 
<label for="Name">Name*</label><br> 
<input type="form" name="Name" id="" value="" required> 
<label for="Email">Email*</label><br> 
<input type="email" name="email" id="" value="" required> 
<label for="Experience">Experience*</label><br> 
<textarea rows="2" cols="20"></textarea><br> 
<div class="buttonHolder"> 
<input type="submit" value="Apply Now"> 
</div> 
</div> 
</form>