如何在 WordPress 中居中對齊特定的聯系表格 7

Question

我在 Wordpress 中使用聯系表 7 插件。 我有兩種形式，但我只想居中對齊一種。

我已在我的附加 CSS 中添加了此代碼

div.wpcf7 {
text-align: center;
}

但它適用於兩種形式

我想居中對齊的那個有這個簡碼

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

我曾經在短代碼的開頭簡單地輸入<center> 。 但我現在正在使用插件來自定義表單。 它只是要求選擇您想要自定義的表單，而不是輸入簡碼。 但它不是居中對齊文本。 所以，請告訴我附加 CSS 的代碼，以在中心對齊文本或完成表單，但只有一個表單不是全部。

Answer 1

您必須查看每個表單的唯一 ID。 ID 將包含您的表單 ID (257) 和頁面 ID - 無論是什么。 在下面的示例中，它的頁面 ID 為 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
}

Answer 2

正如@Howard-E 指出的那樣，聯系表 7 將命名為wpcf7-f<form ID>-p<integer>-o<integer> 。 您可以使用^=開頭的選擇器定位 ID 為 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 3

如果您將所有內容都設置為 center ，則必須將 width:100% 和 display:block 設置為所有元素。

嘗試 ：

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