如何在 WordPress 中居中对齐特定的联系表格 7答案

【问题标题】：How to center align a particular contact form 7 in WordPress如何在 WordPress 中居中对齐特定的联系表格 7
【发布时间】：2020-03-16 03:18:25
【问题描述】：

我在 Wordpress 中使用联系表格 7 插件。我有两种形式，但我只想居中对齐一个。

我已经在我的附加 CSS 中添加了这段代码

div.wpcf7 {
text-align: center;
}

但它在两种形式上都有效

我要居中对齐的有这个简码

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

我以前只是在短代码的开头输入<center>。但我现在正在使用插件来自定义表单。它只是要求选择您要自定义的表单，而不是输入短代码。但它不是居中对齐文本。所以，请告诉我附加 CSS 的代码，以在中心对齐文本或完整的表格，但只有一个表格不是全部。

【问题讨论】：

标签： css wordpress

【解决方案1】：

正如@Howard-E 所指出的，Contact Form 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>

【讨论】：

非常感谢。我刚刚复制了 [id^="wpcf7-f257"] { text-align: center; } 我看到了魔法只是那个表格在中心而不是其他人。顺便说一句，没有或不知道页面 ID。无论如何它工作了:)耶!!
你解决了我的问题。我不是编码员，但有时我需要编码帮助。因此，如果在 WhatsAPP 上给我发短信或其他东西会很棒。每次您解决我的小编码问题时，我都会寄给您几美元。在+919354109153上WhatsApp我吗？我的脸书-facebook.com/digirishab
我很高兴它成功了！我建议您继续在 Stackoverflow 上发布您的代码问题。这样其他有类似问题的人也可能受益！ :o)

【解决方案2】：

您必须查看每个表单的唯一 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
}

【讨论】：

【解决方案3】：

如果将所有内容都设置为 center ，则必须将 width:100% 和 display:block 设置为所有元素。

试试：

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

【讨论】：