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:

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):

What am I doing wrong?

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

回答1:

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.

回答2:

You need this css rule:

#recaptcha_area { margin: auto}

回答3:

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

回答4:

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

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

回答5:

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/

回答6:

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,

回答7:

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

来源：https://stackoverflow.com/questions/18235549/recaptcha-box-not-being-aligned-correctly

标签

html

css

recaptcha