フィールド上のCSS中心のテキスト

Question

私はCSSには恐ろしく、入力フィールドの上にテキストをどのように配置できるのだろうかと思っていました。

これは私が持っているものです。

.fieldset{ 
    border: 1px solid rgb(255,232,57); 
    width: 400px; 
    margin:0px auto; 
    text-align:center; 
} 

私は何を得る：

HTML：

<div class="fieldset" id="Display"> 
<form id="addNew" action="/RxCard/AddAccount" enctype="multipart/form-data" method="post" novalidate="novalidate"><input name="__RequestVerificationToken" type="hidden" value="gz4TQWfHkdBy6ClvES3plFN_RK4J8F3neJdgvSzTf3_eJX_pnvPvbN71UR8jrBlysSPWi3jHmx05s7svwr82TF1hmGwSDb5EgsODmmE6H6k1">      <fieldset> 
          <div class="form">       
           <label id="lblAccountName">Account Name</label> 
           <span class="field-validation-valid" data-valmsg-replace="true" data-valmsg-for="Pharmacy.AccountName"></span> 
           <input name="Pharmacy.AccountName" id="Pharmacy_AccountName" type="text" value="" data-val-required="The account name is required." data-val="true"> 

           <label id="lblAddress" style="margin: 5px;">Address</label> 
           <span class="field-validation-valid" data-valmsg-replace="true" data-valmsg-for="Pharmacy.Address"></span> 
           <input name="Pharmacy.Address" id="Pharmacy_Address" type="text" value="" data-val-required="The address is required." data-val="true"> 

           <label id="lblCity" style="margin: 5px;">City</label> 
           <span class="field-validation-valid" data-valmsg-replace="true" data-valmsg-for="Pharmacy.City"></span> 
           <input name="Pharmacy.City" id="Pharmacy_City" type="text" value="" data-val-required="The city is required." data-val="true"> 

           <label id="lblState" style="margin: 5px;">State</label> 
           <span class="field-validation-valid" data-valmsg-replace="true" data-valmsg-for="Pharmacy.State"></span> 
           <input name="Pharmacy.State" id="Pharmacy_State" type="text" value="" data-val-required="The state is required." data-val="true"> 

           <label id="lblZip" style="margin: 5px;">Zip</label> 
           <span class="field-validation-valid" data-valmsg-replace="true" data-valmsg-for="Pharmacy.ZipCode"></span> 
           <input name="Pharmacy.ZipCode" id="Pharmacy_ZipCode" type="text" value="" data-val-required="The zip code is required." data-val="true" data-val-regex-pattern="^[-,0-9]+$" data-val-regex="Zip code can only contain numeric values."> 

           <label id="lblPhoneNumber" style="margin: 5px;">Phone Number (optional)</label> 
           <span class="field-validation-valid" data-valmsg-replace="true" data-valmsg-for="Pharmacy.PhoneNumber"></span> 
           <input name="txtArea" class="valid" id="txtArea" aria-invalid="false" aria-describedby="txtArea-error" style="width: 5em; float: left;" onkeyup="tabout(this,'txtPrefix');" type="text" maxlength="3" value=""> 
           <input name="txtPrefix" class="valid" id="txtPrefix" aria-invalid="false" aria-describedby="txtPrefix-error" style="width: 5em; float: left;" onkeyup="tabout(this,'txtSuffix');" type="text" maxlength="3" value=""> 
           <input name="txtSuffix" class="valid" id="txtSuffix" aria-invalid="false" aria-describedby="txtSuffix-error" style="width: 5em; float: left;" type="text" maxlength="4" value=""> 

          </div> 

         </fieldset> 
         <input type="submit" value="Save"> 
         <input type="submit" value="Cancel"> 
</form>    </div> 

更新： 私は置き換えることによってそれを解決しているかもしれないと思います」プロパティ "width：200px;"を持つ "form"と呼ばれる新しいクラスでブロックしますと "マージン：0自動;"？私はまだ専門家から意見を得たいと思っています。

Answer 1

を私はフレックスボックスの巨大な提唱者だけど、これは私だけです:)

form { 
 
    display: flex; 
 
    flex-direction: column; 
 
    align-items: center; 
 
} 
 

 
input { 
 
    width: 200px; /* SET THIS TO WHATEVER WIDTH */ 
 
} 
 

 
input[type="submit"] { 
 
    margin-top: 25px; 
 
} 
 

 
/* BASIC STYLING */

<form action="#" method="post"> 
 
    <label for="name">Text Input:</label> 
 
    <input type="text" name="name" id="name" value="" tabindex="1" /> 
 
    <label for="name">Text Input:</label> 
 
    <input type="text" name="name" id="name" value="" tabindex="1" /> 
 
    <label for="name">Text Input:</label> 
 
    <input type="text" name="name" id="name" value="" tabindex="1" /> 
 
    <input type="submit" value="Submit" /> 
 
</form>

Answer 2

はあなたがそんなに欲しかったこの

input { 
    width: 100%; 
} 

UPD_

を試してみてください？それは簡単です：

label { 
    display: block; 
} 
input[type=text] { 
    margin:0px auto; 
    /* OR  */ 
    /* width: 100%; */ 
} 

はここを参照してください - https://jsfiddle.net/7znty0vb/2/