Блог

Как мне переместить контактную форму, которая находится на красном фоне, который вы видите на изображении, в центр?

 <form id="wpforms-form-680" class="wpforms-validate wpforms-form" data-formid="680" method="post" enctype="multipart/form-data" action="/staging/2490/" data-token="22197d396681c8092b8e8acb3cf9b0e5" novalidate="novalidate">
   <noscript class="wpforms-error-noscript">Please enable JavaScript in your browser to complete this form.</noscript>
   <div class="wpforms-field-container">
      <div id="wpforms-680-field_0-container" class="wpforms-field wpforms-field-name contact-form-labels" data-field-id="0"><label class="wpforms-field-label" for="wpforms-680-field_0">Name <span class="wpforms-required-label">*</span></label><input type="text" id="wpforms-680-field_0" class="wpforms-field-medium wpforms-field-required" name="wpforms[fields][0]" required=""></div>
      <div id="wpforms-680-field_1-container" class="wpforms-field wpforms-field-email" data-field-id="1"><label class="wpforms-field-label" for="wpforms-680-field_1">Email <span class="wpforms-required-label">*</span></label><input type="email" id="wpforms-680-field_1" class="wpforms-field-medium wpforms-field-required" name="wpforms[fields][1]" required=""></div>
      <div id="wpforms-680-field_2-container" class="wpforms-field wpforms-field-textarea" data-field-id="2">
         <label class="wpforms-field-label" for="wpforms-680-field_2">Project Details <span class="wpforms-required-label">*</span></label>
         <textarea id="wpforms-680-field_2" class="wpforms-field-medium wpforms-field-required wpforms-limit-characters-enabled" data-form-id="680" data-field-id="2" data-text-limit="10000" name="wpforms[fields][2]" placeholder="Please include your contact number if you would like a call back" maxlength="10000" required=""></textarea>
         <div class="wpforms-field-limit-text" id="wpforms-field-limit-text-680-2">0 of 10000 max characters.</div>
      </div>
   </div>
   <div class="wpforms-submit-container"><input type="hidden" name="wpforms[id]" value="680"><input type="hidden" name="wpforms[author]" value="1"><input type="hidden" name="wpforms[post_id]" value="2"><button type="submit" name="wpforms[submit]" class="wpforms-submit contact-form-button" id="wpforms-submit-680" value="wpforms-submit" aria-live="assertive" data-alt-text="Sending..." data-submit-text="Send">Send</button></div>
</form>


div.wpforms-container-full .wpforms-form input.wpforms-field-medium,
div.wpforms-container-full .wpforms-form .wpforms-field-row.wpforms-field-medium {
    max-width: 100%;
}

div.wpforms-container-full .wpforms-form input[type=email], div.wpforms-container-full .wpforms-form input[type=text], div.wpforms-container-full .wpforms-form textarea{
    width:70%;
}
 

Когда я добавляю margin auto в вышеприведенный css, который я опубликовал, он перемещает область ввода текста и проверки в центр, но метки не перемещаются. Пытался выяснить, как его переместить, как когда я пытался добавить margin: auto для .wpforms-field-label, он не перемещает его.

Полный css из того, что я вырвал из проверки:

 div.wpforms-container-full .wpforms-form .wpforms-field-label {
    display: block;
    font-weight: 700;
    font-size: 16px;
    float: none;
    line-height: 1.3;
    margin: 0 0 4px 0;
    padding: 0;
}
div.wpforms-container-full .wpforms-form input, div.wpforms-container-full .wpforms-form label, div.wpforms-container-full .wpforms-form select, div.wpforms-container-full .wpforms-form button, div.wpforms-container-full .wpforms-form textarea {
    margin: 0;
    border: 0;
    padding: 0;
    display: inline-block;
    vertical-align: middle;
    background: none;
    height: auto;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
div.wpforms-container-full, div.wpforms-container-full .wpforms-form * {
    background: none;
    border: 0 none;
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    float: none;
    font-size: 100%;
    height: auto;
    letter-spacing: normal;
    list-style: none;
    outline: none;
    position: static;
    text-decoration: none;
    text-indent: 0;
    text-shadow: none;
    text-transform: none;
    width: auto;
    visibility: visible;
    overflow: visible;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    -ms-box-shadow: none;
    -o-box-shadow: none;
    box-shadow: none;
}
.contact-form label {
    margin-bottom: .25em;
    float: none;
    font-weight: 700;
    display: block;
}
 

Я только что добавил text-align:center; в ваш проект.

 form#wpforms-form-680 {
text-align:center;
}
 

Вы также можете использовать flexbox для центрирования формы.

 form#wpforms-form-680{
  display: flex;
  flex-direction: column;
  align-items: center;
}
 

Когда я добавляю margin auto в вышеприведенный css, который я опубликовал, он перемещает область ввода текста и проверки в центр, но метки не перемещаются.

Это, безусловно, связано с тем, что в соответствии с приведенным ниже правилом входные данные и ширина текстовой области устанавливаются равными 70%… И метки по-прежнему имеют ширину 100%.

 div.wpforms-container-full .wpforms-form input[type=email], div.wpforms-container-full .wpforms-form input[type=text], div.wpforms-container-full .wpforms-form textarea{
    width:70%;
}
 

Вместо этого я бы применил width: 70% и margin: 0 auto; <form> , чтобы все внутри перемещалось в центр, будучи выровненным по левому краю. Это проще и будет легче настроить для мобильных устройств с @media помощью правила.