中心输入形式

Question

我已经浏览了很多其他stackoverflows。我似乎也遇到了其他人遇到的相同问题，但是在我的生命中，按照他们的解决方案，我仍然无法集中我的意见。我试过使用范围选择形式的子项，p元素的子项，然后直接选择输入。

这是我的标记：

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

我知道“提交”按钮显示不正确。目前不关心这一点。

感谢您的帮助。试图解决这个问题已经超过一个小时了。

这里也是codepen。

Answer 1

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