Question

我的主页上有一个联系表格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;
}

两个都没有运气。我已经在检查员身上乱了一会儿，并且无法改变它。有关选择器或属性的任何其他建议吗？

Answer 1

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

除此之外，margin: auto;应该很好用。

Answer 2

如果您想全局使用它，请使用此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放入单个页面的选项。

Answer 3

假设您的联系表单ID为：4579 这只是该特定形式的CSS。

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

Answer 4

请加入style.css：

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

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

4 个答案: