Поле reCAPTCHA неправильно выровнено

Я не могу правильно выровнять форму reCAPTCHA на моей странице регистрации. Даже если div он содержится в text-align, установленном на center, он отображается в левой части страницы:
Bugged version: the reCAPTCHA is on the left Хотя если я изменил его align на JavaScript (document.getElementById("recaptcha_widget_div").align = "right"), он будет работать правильно (снимок сделан в середине страницы):
Correct version: the reCAPTCHA is in the middle

Что я делаю неправильно?

Изменить: здесь скрипт с div и весь CSS, указанный на странице.

Ответ 1

Я отправляю обновленное решение по этому вопросу, так как принятое решение не работает с новой версией Google ReCaptcha 2.0.

Правильное форматирование:

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

В новом ReCaptcha используется один класс div, называемый g-recaptcha, а также ряд неидентифицированных и неклассифицированных детей div. Это, пожалуй, самый безопасный способ получить правильное расположение виджета.

Ответ 2

Вам нужно это правило css:

#recaptcha_area { margin: auto}

Ответ 3

Я бы нацелился на реальную форму. Поскольку ширина уже установлена, вы можете правильно ее выровнять, добавив маржу.

#recaptcha_area {
         margin: auto;
    }

Fiddle

Ответ 4

@fred02138 решение не сработало для меня, и мне пришлось добавить display:table в css:

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

Ответ 5

Установите подходящий CSS в форме. Все это блокирует элементы, поэтому выравнивание по тексту: центр не будет работать на нем. text-align работает только с встроенными элементами.

Однако это будет:

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

Обновлена ​​скрипка здесь: http://jsfiddle.net/hw7rX/2/

Ответ 6

Мой подход состоит в том, чтобы добавить панель или div и поместить в нее reCaptcha. Таким образом, вам просто нужно выровнять панель или элемент управления div вместо reCaptcha.

Привет,

Ответ 7

i отредактируйте два селектора

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

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

здесь обновлен fiddle