www.webdeveloper.com
Results 1 to 8 of 8

Thread: reCaptcha not centering

  1. #1
    Join Date
    Jun 2006
    Location
    Under your bed
    Posts
    357

    Question 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;"
    The better I get at programming, the more I appreciate arrays. Handy dandy things they are.

  2. #2
    Join Date
    Mar 2011
    Posts
    1,139
    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.
    Rick Trethewey
    Rainbo Design

  3. #3
    Join Date
    Jun 2006
    Location
    Under your bed
    Posts
    357
    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?
    The better I get at programming, the more I appreciate arrays. Handy dandy things they are.

  4. #4
    Join Date
    Mar 2011
    Location
    The Pleiades
    Posts
    31
    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

  5. #5
    Join Date
    Mar 2011
    Location
    The Pleiades
    Posts
    31
    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?

  6. #6
    Join Date
    Mar 2011
    Location
    The Pleiades
    Posts
    31
    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.

  7. #7
    Join Date
    Jun 2006
    Location
    Under your bed
    Posts
    357
    Just letting you know I sent you a PM.
    The better I get at programming, the more I appreciate arrays. Handy dandy things they are.

  8. #8
    Join Date
    Jan 2013
    Posts
    4
    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 Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles