在字段上的CSS中心文本

我對CSS很可怕，想知道如何在輸入字段中居中放置文本。在字段上的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>

更新：我想我可能通過更換已經解決了它「塊「與一個新的類稱爲」形式「屬性」寬度：200px;「和「保證金：0汽車;」？但我仍然希望得到專家的意見。

來源

2016-07-25 thatdude

請發表您呈現HTML（你在瀏覽器中看到的）。 –

@JF我添加了屏幕截圖。謝謝！ – thatdude

包含輸入和標籤的元素比輸入寬，因此技術上標籤居中。我會在'.block'上做你的尺寸，然後根據'.block'設置輸入的寬度 - 這樣，一切都將完美居中。 – Toby

我Flexbox的一個巨大的倡導者，但這只是我:)

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>

來源

2016-07-27 20:45:23 zsawaf

試試這個

input { 
    width: 100%; 
}

UPD_

你想這麼多？原因很簡單：

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

在這裏看到的 - https://jsfiddle.net/7znty0vb/2/

來源

2016-07-25 23:12:18 buildok

是的，我問這個問題後不久就想出來了。希望這可以幫助別人。謝謝@buildok！（順便說一句，我沒有讓你失望） – thatdude

在字段上的CSS中心文本

回答

相關問題