reCaptcha not centering

**evenstar7139** · 01-03-2013, 05:23 AM

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;">

**rtrethewey** · 01-03-2013, 09:47 AM

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.

**evenstar7139** · 01-03-2013, 06:25 PM

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?

**LearningCoder** · 01-03-2013, 09:26 PM

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

**LearningCoder** · 01-03-2013, 09:31 PM

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?

**LearningCoder** · 01-03-2013, 09:37 PM

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.

**evenstar7139** · 01-04-2013, 04:51 AM

Just letting you know I sent you a PM.

**john00** · 01-11-2013, 04:31 AM

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..

Thread: reCaptcha not centering

Thread Tools

Display

reCaptcha not centering

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions