Как по центру выровнять конкретную контактную форму 7 в WordPress

Question

Я использую плагин контактной формы 7 в Wordpress. У меня есть две формы, но я хочу выровнять по центру только одну.

Я добавил этот код в свои дополнительные CSS

div.wpcf7 {
text-align: center;
}

Но он работает, но на обеих формах

Тот, который я хочу выровнять по центру, имеет этот шорткод

[contact-form-7 id=”257″ title=”Subscription Form”]

Я использовал просто набрать <center> в начале шорткода. Но теперь я использую плагин для настройки формы. Он просто просит выбрать форму, которую вы хотите настроить вместо ввода шорткода. Но это не выравнивание текста по центру. поэтому, пожалуйста, скажите мне код для дополнительного CSS, чтобы выровнять текст или заполнить форму по центру, НО ТОЛЬКО ОДНА ФОРМА, НЕ ВСЕ.

Answer 1

Как указывает @ Howard-E, контактная форма 7 назовет форму wpcf7-f<form ID>-p<integer>-o<integer>. Вы можете настроить таргетинг на форму с идентификатором 257, используя ^= начинается с селектора:

[id^="wpcf7-f257"] { /* styles here */ }

[id^="wpcf7-f257"] {
  text-align: center;
}

<div role="form" class="wpcf7" id="wpcf7-f257-xyz">
This should be centered
</div>

<div role="form" class="wpcf7" id="wpcf7-f258-xyz">
This should not be centered
</div>

Answer 2

если вы установите все выравнивание по центру, вы должны установить ширину: 100% и отобразить: блокировать все элементы.

Попробуйте:

.wpcf7 input , .wpcf7 label {
  width:100%;
  display:block;
  text-align:center;
}

Answer 3

Вам нужно будет посмотреть на идентификатор, который уникален для каждой формы. Идентификатор будет содержать идентификатор вашей формы (257) и идентификатор страницы - что бы это ни было. В приведенном ниже примере это идентификатор страницы 12. Вам нужно будет найти свою собственную.

<div role="form" class="wpcf7" id="wpcf7-f257-p12-o1" lang="en-US" dir="ltr">

Как только вы получите эту информацию, вставьте ее в CSS.

div#wpcf7-f257-p12-o1 {
   text-align: center
}