html - 字段上的 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”的新类替换“block”来解决它。和“ margin :0 自动；”？但我还是想听听专家的意见。

Answer 1

我是 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>