Contact Form 7 - Center the Input Fields

Question

I have a Contact form 7 on my home page here: http://grownowsma.com/

I have been trying to get the input fields to be centered. I tried a few tricks I've used before and answers from other Stack Overflow questions and for some reason no luck.

I tried this trick: http://www.screencast.com/t/ygBP3eQn9jQu

I tried these in the CSS:

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

And this:

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

Both no luck. I've been messing around in the inspector for a while and haven't been able to change it. Any other suggestions for selectors or attributes to try?

Answer 1

You don't have an element with the class contactform, so you can't select inputs beneath it. Either add that around the form shortcode in your post, or use a different selector e.g. .home .wpcf7-form input[type="text"], .home .wpcf7-form input[type="email"] assuming you don't add a second CF7 form on the homepage where you don't want to center the inputs.

Other than that, margin: auto; should work nicely.