Posizionamento del widget reCAPTCHA con i CSS

Question

Sto cercando di allineare il widget reCAPTCHA con i miei campi di input, ma lo stile .g-recaptcha non sembra ottenere molto. Qualcuno sa di selettori che posso usare?

form HTML:

<div class="contact-form"> 
<form role="form" method="post" action="contact-form.php"> 
    <label for="name"><span>Name</span><input type="text" class="input-field" name="name" required data-errormessage-value-missing="Please enter your name." /></label> 
    <label for="email"><span>Email</span><input type="email" class="input-field" name="email" required data-errormessage-value-missing="Please enter your email address." /></label> 
    <label for="message"><span>Message</span><textarea name="message" class="textarea-field" required data-errormessage-value-missing="Please enter your message."></textarea></label> 
    <span>&nbsp;</span><div id="recaptcha"><div class="g-recaptcha" data-sitekey="6LcBawsTAAAAAKBPfGs1jApXNRLvR2MIPng0Fxol" style="margin: 0;"></div></div> 
    <label><span>&nbsp;</span><input type="submit" value="" class="submit-button" /></label>     
</form> 
</div> 

CSS: URL

.contact-form { 
    margin: 0 auto; 
    position: relative; 
    top: 50%; 
    transform: translateY(-50%); 
    max-width: 600px; 
    font-family: 'LinotypeUniversW01-Thin_723604', Arial, sans-serif; 
    font-size: 20px; 
} 

.contact-form label { 
    display: block; 
    margin: 0px 0px 15px 0px; 
} 

.contact-form label > span { 
    width: 100px; 
    text-align: right; 
    float: left; 
    padding-top: 8px; 
    padding-right: 20px; 
} 

.contact-form input, .contact-form textarea { 
    margin-bottom: 15px; 
    padding: 10px; 
    border: none; 
} 

.contact-form input.input-field { 
    width: 70%; 
    height: 20px; 
    font-size: 18px; 
} 

.contact-form .textarea-field { 
    width: 70%; 
    height: 250px; 
    font-size: 18px; 
} 

textarea { 
    resize: none; 
} 

textarea:focus, input:focus { 
    outline: 0; 
} 

#recaptcha { 
    width: 304px; 
    margin: 0; 
} 

.g-recaptcha { 
    text-align: left; 
} 

input.submit-button { 
    background-image: url("../img/submit-button.jpg"); 
    width: 225px; 
    height: 60px; 
    border: none; 
} 

Pagina: http://api.marioparra.me#contact.

Qualsiasi aiuto sarebbe molto apprezzato!

Answer 1

Basta modificare il CSS esistente con questa:

.contact-form label, #recaptcha { 
    display: block; 
    margin: 0px 0px 15px 0px; 
} 
.contact-form label > span, #recaptcha::before { 
    width: 100px; 
    text-align: right; 
    float: left; 
    padding-top: 8px; 
    padding-right: 20px; 
    content:""; //Make sure you add this as well 
} 
.contact-form .textarea-field, .g-recaptcha { 
    width: 70%; 
    height: 250px; 
    font-size: 18px; 
    display: inline-block; 
} 

elementi pseudo vengono usati qui in modo che non dovete cambiare il vostro codice. :before funziona come una spanna all'interno dell'etichetta, fornendo così uniformità nella struttura html e quindi risolvendo il problema di allineamento

Answer 2

Per allineare reCAPTCHA con il riposo degli altri form-fields dovete cambiare il vostro DOM struttura simile a questa:

HTML:

<label for="captcha"> 
    <span>&nbsp;</span> 
     <div id="recaptcha"> 
      ... 

poi anche modificare/scrivere i CSS:

#recaptcha { 
    margin: 0px; 
    width: 304px; 
    position: relative; 
    float: left; 
} 

#recaptcha iframe { 
    position: absolute; 
    left: 0px; 
    top: 0px; 
} 

Questo farà il trucco per voi.