CODEWITHSUNDEEP
htmlcssrecaptcha
Giulio Muscarello
Giulio Muscarello

Reputation: 1341

reCAPTCHA box not being aligned correctly

I can't get to align correctly the reCAPTCHA form on my registration page. Even if the div it is contained in has text-align set to center, it is displayed on the left of the page:
Bugged version: the reCAPTCHA is on the left While if I change its align via JavaScript (document.getElementById("recaptcha_widget_div").align = "right") it works correctly (screenshot taken in the middle of the page):
Correct version: the reCAPTCHA is in the middle

What am I doing wrong?

Edit: here's a fiddle with the div and the entire CSS called in the page.

Upvotes: 11

Views: 16880

Answers (7)

AceShot
AceShot

Reputation: 350

I'm posting an updated solution to this question, as the accepted solution does not work with the new version 2.0 of Google's ReCaptcha.

Correct formatting is:

.g-recaptcha div { margin-left: auto; margin-right: auto;}

The new ReCaptcha uses a single div class called g-recaptcha and a number of unidentified and unclassified div children. This is probably the cleanest safest way to get the widget to center properly.

Upvotes: 25

user2084795
user2084795

Reputation: 734

@fred02138's solution did not work for me and I had to add display:table to the css:

#recaptcha_area {
    display:table;
    margin: auto;
}

Upvotes: 3

Anthony Valera
Anthony Valera

Reputation: 551

I would target the actual form. Since width is already set, you can have it align correctly by adding margin.

#recaptcha_area {
         margin: auto;
    }

Fiddle

Upvotes: 3

Soheil Ghahremani
Soheil Ghahremani

Reputation: 1135

i edit two selector 

table {
text-align: center;
margin-left: 0;
margin-right: auto;
width: 85%;
}

.label {
color: gray;
text-align: left;
width:160px;
}

here is an updated fiddle

Upvotes: 0

fred02138
fred02138

Reputation: 3361

You need this css rule:

#recaptcha_area { margin: auto}

Upvotes: 13

cvillalobosm
cvillalobosm

Reputation: 155

My approach will be to add a panel or div and put the reCaptcha inside of it. So you just have to align the panel or the div control instead of reCaptcha.

Regards,

Upvotes: 0

CaribouCode
CaribouCode

Reputation: 14418

Set appropraite CSS on the form. It's all block elements so text-align:center won't work on it. text-align only works on inline elements.

However this will:

form { display: inline-block; margin: 0 auto; }

Updated fiddle here: http://jsfiddle.net/hw7rX/2/

Upvotes: 2

Related Questions