reCaptcha not centering

Printable View

01-03-2013, 05:23 AM
evenstar7139

reCaptcha not centering

My reCaptcha seems to only center if I put <center></center> tags around the code, but I want my site to validate, so I can't do this.

I've searched all over the internet and I can't find a solution that works.

Here's some of my code:

PHP Code:

<div style="text-align:center !important;"><script type="text/javascript" src="http://www.google.com/recaptcha/api/challenge?k=6Le1-tYSAAAAAOamyQqUuFKZfSYLR9FmCj0Oho5M"></script> <noscript> <iframe src="http://www.google.com/recaptcha/api/noscript?k=6Le1-tYSAAAAAOamyQqUuFKZfSYLR9FmCj0Oho5M" height="300" width="500" frameborder="0"></iframe><br/> <textarea name="recaptcha_challenge_field" rows="3" cols="40"></textarea> <input type="hidden" name="recaptcha_response_field" value="manual_challenge"/> </noscript></div>

I also tried putting this in the DIV style:

PHP Code:

<div style="margin: 0 auto !important;">

and this:

PHP Code:

<div style="margin: 0 auto !important;">

and this

PHP Code:

<div style="margin: 0 auto;">
01-03-2013, 09:47 AM
rtrethewey

You need to set an explicit CSS width of less than 100% the size of its containing block for the <div> in order for the 'margin:0 auto' to have any effect.
01-03-2013, 06:25 PM
evenstar7139

Thanks for the reply. Anyhoo, I tried this and nothing happened:

<div style="width: 500px; margin: 0 auto;">

Then I tried this, to see what would happen, and it changed the with of the area AROUND the captcha but didn't touch the captcha itself:
<div style="width: 900px; margin: 0 auto;">

Maybe the DIV style isn't getting applied to the captcha?
01-03-2013, 09:26 PM
LearningCoder

Have you got a live example at all? It's strange because using width and margin auto generally will center things.

Is there anything else which could affect the styles for the <div>? For example is that <div> inside another <div>? Could be an inheritance problem?

Regards
01-03-2013, 09:31 PM
LearningCoder

Do you want your captcha centered within that div, not the actual div itself to be centered?

Just looked at the code and the <div> is centering, but the captcha is aligned to the left.

I'm guessing you want the captcha centered?
01-03-2013, 09:37 PM
LearningCoder

Sorry for re-posting but cannot seem to edit my previous post.

Give this code a try:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>HTML Template</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <script type="text/javascript" src="jquery-1.8.3.js"></script> <style type="text/css"> #captcha_div { width: 500px; background: blue; margin: auto; padding: 5px; text-align: center; } #captcha_div > div { width: 300px; border: 1px solid black; margin: auto; text-align: center; } </style> <script> </script> </head> <body> <div id="captcha_div"><script type="text/javascript" src="http://www.google.com/recaptcha/api/challenge?k=6Le1-tYSAAAAAOamyQqUuFKZfSYLR9FmCj0Oho5M"></script> <noscript> <iframe src="http://www.google.com/recaptcha/api/noscript?k=6Le1-tYSAAAAAOamyQqUuFKZfSYLR9FmCj0Oho5M" height="300" width="500" frameborder="0"></iframe><br/> <textarea name="recaptcha_challenge_field" rows="3" cols="40"></textarea> <input type="hidden" name="recaptcha_response_field" value="manual_challenge"/> </noscript></div> </body> </html>

Hope this helps,

Regards,

LC.
01-04-2013, 04:51 AM
evenstar7139

Just letting you know I sent you a PM.
01-11-2013, 04:31 AM
john00

I think you should check your code once again because I think you want to centeried your
captcha but in your code you are doing that captcha's <div> centerized.. so, I think you
should correct it first..