reCAPTCHA框未正确对齐

Question

我无法在注册页面上正确对齐reCAPTCHA表单。即使div中包含的text-align设置为center，它也会显示在页面的左侧：
如果我通过JavaScript（align）更改其document.getElementById("recaptcha_widget_div").align = "right"，它可以正常工作（截图位于页面中间）：

我做错了什么？

编辑：here是div和页面中调用的整个CSS的小提琴。

Answer 1

我发布了此问题的更新解决方案，因为已接受的解决方案不适用于Google ReCaptcha的新版本2.0。

正确的格式是：

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

新的ReCaptcha使用一个名为div的{​​{1}}类和一些未识别且未分类的g-recaptcha个孩子。这可能是使小部件正确居中的最简单最安全的方法。

Answer 2

你需要这个css规则：

#recaptcha_area { margin: auto}

Answer 3

我会以实际形式为目标。由于已经设置了宽度，因此可以通过添加边距使其正确对齐。

#recaptcha_area {
         margin: auto;
    }

Fiddle

Answer 4

@ fred02138的解决方案对我不起作用，我不得不将 display:table 添加到css中：

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

Answer 5

在表单上设置适当的CSS。它是所有块元素，因此text-align：center不会对它起作用。 text-align仅适用于内联元素。

然而，这将：

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

此处更新了小提琴：http://jsfiddle.net/hw7rX/2/

Answer 6

我的方法是添加一个面板或div并将reCaptcha放在其中。所以你只需要对齐面板或div控件而不是reCaptcha。

此致

Answer 7

我编辑两个选择器

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

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

这是更新的fiddle