11

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

我究竟做错了什么？

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

4

7 回答 7

25

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

正确的格式是：

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

新的 ReCaptcha 使用一个div名为的类g-recaptcha和许多未识别和未分类的div子级。这可能是让小部件正确居中的最干净最安全的方法。

于 2015-06-02T16:35:09.197 回答
12

你需要这个 css 规则：

#recaptcha_area { margin: auto}
于 2013-08-14T15:23:37.313 回答
3

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

#recaptcha_area {
         margin: auto;
    }

小提琴

于 2013-08-14T15:25:30.020 回答
3

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

#recaptcha_area {
    display:table;
    margin: auto;
}
于 2014-04-26T08:42:36.750 回答
2

在表单上设置适当的 CSS。这都是块元素，所以 text-align:center 不会在它上面工作。text-align 仅适用于内联元素。

但是，这将：

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

在这里更新小提琴：http: //jsfiddle.net/hw7rX/2/

于 2013-08-14T15:21:17.550 回答
0

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

问候，

于 2013-08-14T15:23:04.587 回答
0

我编辑两个选择器

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

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

这是一个更新的小提琴

于 2013-08-14T15:23:44.747 回答