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>

更新：我想我可能已经通过替换＆＃34; block＆＃34;一个名为＆＃34; form＆＃34;具有属性＆＃34;宽度：200px;＆＃34;和＆＃34;保证金：0自动;＆＃34;？但我仍然希望得到专家的意见。

Answer 1

我是flexbox的忠实拥护者，但这只是我:)

＆＃13;

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 */

＆＃13;

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

＆＃13;

Answer 2

试试这个

input {
   width: 100%;
}

UPD _

你想要这么多？这很简单：

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

见这里 - https://jsfiddle.net/7znty0vb/2/

字段上的CSS中心文本

2 个答案: