thatdude thatdude - 4 months ago 7
CSS Question

CSS-center text over a field

I'm horrible with CSS and was wondering how I could center text over input fields.

This is what I have:

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


what I get:

enter image description here

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>


update:
I think I might have solved it by replacing "block" with a new class called "form" with properties "width:200px;" and "margin:0 auto;"? but I'd still like to get an opinion from the experts.

Answer

I'm a huge advocate of flexbox, but this is just me :)

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>