联系表格 7 - 将输入字段居中答案

【问题标题】：Contact Form 7 - Center the Input Fields联系表格 7 - 将输入字段居中
【发布时间】：2018-04-11 16:18:11
【问题描述】：

我的主页上有一个联系表 7：http://grownowsma.com/

我一直在尝试使输入字段居中。我尝试了一些我以前使用过的技巧以及其他 Stack Overflow 问题的答案，但由于某种原因没有运气。

我试过这个技巧：http://www.screencast.com/t/ygBP3eQn9jQu

我在 CSS 中尝试了这些：

.contactform input[type="text"],form .contactform input[type="email"]{
    margin: 9px auto 0 !important;
}

还有这个：

.wpcf7-form-style {
    max-width: 800px;
    margin: 0 auto;
    float: none;
    display: block;
}

两者都没有运气。我一直在检查员里乱搞一段时间，一直没能改变它。对于选择器或属性有什么其他建议可以尝试吗？

【问题讨论】：

添加样式="margin: 0 auto;"到两个输入字段。

标签： css wordpress input contact-form-7

【解决方案1】：

它终于对我有用了：

label, .wpcf7-submit{
    margin-left: 50% !important;
}

如果需要，您还可以直接在表单中添加<div style="text-align:center">。

【讨论】：

【解决方案2】：

假设您的联系表单 ID 是：4579 这里是仅适用于该特定表单的 CSS。

#wpcf7-f4579-p4004-o1 .wpcf7-text{
    display: block;
    margin: auto;
}

【讨论】：

【解决方案3】：

如果你想全局使用它，请使用这个 CSS：

.f7-form-control, input[type="text"].wpcf7-form-control,input[type="email"].wpcf7-form-control, input[type="password"].wpcf7-form-control, input[type="tel"].wpcf7-form-control, textarea.wpcf7-form-control,.post-password-form input[type='password'],input[type="email"] {
    margin: auto;
}

如果你只想要一个页面，那么你可以使用这个插件https://wordpress.org/plugins/wp-add-custom-css/。它会为您提供将自定义 CSS 放入单个页面的选项。

【讨论】：

【解决方案4】：

请在你的 style.css 中添加：

.wpcf7-form-control.wpcf7-text.wpcf7-validates-as-required {
    margin-left: 250px !important;
}

【讨论】：

【解决方案5】：

您没有 contactform 类的元素，因此您无法选择其下方的输入。在您的帖子中添加表单短代码，或使用不同的选择器，例如.home .wpcf7-form input[type="text"], .home .wpcf7-form input[type="email"] 假设您没有在主页上添加第二个 CF7 表单，而您不想让输入居中。

除此之外，margin: auto; 应该可以正常工作。

【讨论】：