-1

I have looked through quite a few of the other stackoverflows. I seem to have the same issue others have had, but for the life of me, following their solutions I still cannot get my inputs to center. I have tried selecting the children of the form, children of the p element, using the span, and just outright selecting the input.

Here's my markup:

.formFormat {
  line-height:20px !important;
  border-radius:10px !important;
  padding: 5px !important;
 padding-left: 10px !important;
  background-color: transparent !important;
 width: 80% !important;
 margin-bottom:15px;
}

.formSubmit {
 background-color: rgba(77,49,34,1)  !important;
 width: 60%;
 margin: auto !important;
 border-radius:10px !important;
 margin-left: auto !important;
 margin-right: auto !important;
}

.formSubmit:hover {
 background-color:#0472ff !important;
}

.wpcf7-form-control-wrap {
  margin-left:auto;
  margin-right:auto;
}
<form action="/contact/#wpcf7-f322-p135-o3" method="post" class="wpcf7-form" enctype="multipart/form-data" novalidate="novalidate">
  <div style="display: none;">
    <input type="hidden" name="_wpcf7" value="322" />
    <input type="hidden" name="_wpcf7_version" value="5.0.3" />
    <input type="hidden" name="_wpcf7_locale" value="en_US" />
    <input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f322-p135-o3" />
    <input type="hidden" name="_wpcf7_container_post" value="135" />
  </div>
  <p>
    <span class="wpcf7-form-control-wrap FirstName">
      <input type="text" name="FirstName" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required formFormat" aria-required="true" aria-invalid="false" placeholder="First Name (required)" />
    </span><br />
    <span class="wpcf7-form-control-wrap LastName">
      <input type="text" name="LastName" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required formFormat" aria-required="true" aria-invalid="false" placeholder="Last Name (required)" />
    </span><br />
    <span class="wpcf7-form-control-wrap Telephone">
      <input type="text" name="Telephone" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required formFormat" aria-required="true" aria-invalid="false" placeholder="Telephone (required)" />
    </span><br />
<span class="wpcf7-form-control-wrap Email">
  <input type="email" name="Email" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email formFormat" aria-required="true" aria-invalid="false" placeholder="Email (required)" />
    </span><br />
    <label>Applying For (required)<br />
      <span class="wpcf7-form-control-wrap ApplyingFor">
        <select name="ApplyingFor" class="wpcf7-form-control wpcf7-select wpcf7-validates-as-required formFormat" aria-required="true" aria-invalid="false">
          <option value="Pilot">Pilot</option>
          <option value="Mechanic">Mechanic</option>
        </select>
      </span>
    </label><br />
    <span class="wpcf7-form-control-wrap Message">
      <textarea name="Message" cols="40" rows="10" class="wpcf7-form-control wpcf7-textarea wpcf7-validates-as-required formFormat" aria-required="true" aria-invalid="false" placeholder="Leave us a message! (required)">
      </textarea>
    </span><br />
    <span class="wpcf7-form-control-wrap Resume"><input type="file" name="Resume" size="40" class="wpcf7-form-control wpcf7-file wpcf7-validates-as-required formFormat" accept=".jpg,.jpeg,.png,.gif,.pdf,.doc,.docx,.ppt,.pptx,.odt,.avi,.ogg,.m4a,.mov,.mp3,.mp4,.mpg,.wav,.wmv" aria-required="true" aria-invalid="false" />
    </span><br />
    <input type="submit" value="Send" class="wpcf7-form-control wpcf7-submit formSubmit" />
  </p>
  <div class="wpcf7-response-output wpcf7-display-none">
  </div>
</form>

I know the submit button isn't showing up correct. Not concerned about that at the moment.

Any help is appreciated. Been trying to figure this out for upwards of an hour already to no avail.

Here's a codepen as well.

Chris Hitchcock
  • 379
  • 2
  • 13
  • 1
    `text-align:center` to the form .. – Temani Afif Jul 28 '18 at 20:04
  • This worked, given the answer below, however the duplicate which you marked this as, has nothing to do with forms, but tables. Thank you for the text-align:center portion though. – Chris Hitchcock Jul 28 '18 at 20:12
  • this is because you didn't read all the answser ... the most upvoted answers said that you have to use `text-align:center` in order to center inline-block element and input is an inline-block element ... I will add more duplicate if you want – Temani Afif Jul 28 '18 at 20:15

1 Answers1

0

.formFormat {
  line-height:20px !important;
  border-radius:10px !important;
  padding: 5px !important;
 padding-left: 10px !important;
  background-color: transparent !important;
 width: 80% !important;
 margin-bottom:15px;
}

.formSubmit {
 background-color: rgba(77,49,34,1)  !important;
 width: 60%;
 margin: auto !important;
 border-radius:10px !important;
 margin-left: auto !important;
 margin-right: auto !important;
}

.formSubmit:hover {
 background-color:#0472ff !important;
}

.wpcf7-form-control-wrap {
  margin-left:auto;
  margin-right:auto;
}

form, form input {
  text-align: center;
}
<form action="/contact/#wpcf7-f322-p135-o3" method="post" class="wpcf7-form" enctype="multipart/form-data" novalidate="novalidate">
  <div style="display: none;">
    <input type="hidden" name="_wpcf7" value="322" />
    <input type="hidden" name="_wpcf7_version" value="5.0.3" />
    <input type="hidden" name="_wpcf7_locale" value="en_US" />
    <input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f322-p135-o3" />
    <input type="hidden" name="_wpcf7_container_post" value="135" />
  </div>
  <p>
    <span class="wpcf7-form-control-wrap FirstName">
      <input type="text" name="FirstName" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required formFormat" aria-required="true" aria-invalid="false" placeholder="First Name (required)" />
    </span><br />
    <span class="wpcf7-form-control-wrap LastName">
      <input type="text" name="LastName" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required formFormat" aria-required="true" aria-invalid="false" placeholder="Last Name (required)" />
    </span><br />
    <span class="wpcf7-form-control-wrap Telephone">
      <input type="text" name="Telephone" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required formFormat" aria-required="true" aria-invalid="false" placeholder="Telephone (required)" />
    </span><br />
<span class="wpcf7-form-control-wrap Email">
  <input type="email" name="Email" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email formFormat" aria-required="true" aria-invalid="false" placeholder="Email (required)" />
    </span><br />
    <label>Applying For (required)<br />
      <span class="wpcf7-form-control-wrap ApplyingFor">
        <select name="ApplyingFor" class="wpcf7-form-control wpcf7-select wpcf7-validates-as-required formFormat" aria-required="true" aria-invalid="false">
          <option value="Pilot">Pilot</option>
          <option value="Mechanic">Mechanic</option>
        </select>
      </span>
    </label><br />
    <span class="wpcf7-form-control-wrap Message">
      <textarea name="Message" cols="40" rows="10" class="wpcf7-form-control wpcf7-textarea wpcf7-validates-as-required formFormat" aria-required="true" aria-invalid="false" placeholder="Leave us a message! (required)">
      </textarea>
    </span><br />
    <span class="wpcf7-form-control-wrap Resume"><input type="file" name="Resume" size="40" class="wpcf7-form-control wpcf7-file wpcf7-validates-as-required formFormat" accept=".jpg,.jpeg,.png,.gif,.pdf,.doc,.docx,.ppt,.pptx,.odt,.avi,.ogg,.m4a,.mov,.mp3,.mp4,.mpg,.wav,.wmv" aria-required="true" aria-invalid="false" />
    </span><br />
    <input type="submit" value="Send" class="wpcf7-form-control wpcf7-submit formSubmit" />
  </p>
  <div class="wpcf7-response-output wpcf7-display-none">
  </div>
</form>
Coral Kashri
  • 3,436
  • 2
  • 10
  • 22
  • Thank you. I hate when it's something simple and I cannot figure it out. Appreciate it. I will accept the answer as soon as it allows me – Chris Hitchcock Jul 28 '18 at 20:08