Как центрировать форму в twitter bootstrap?

<div class="container">
    <div class="row">
        <div class="span6 center">
            <form>
                <table>
                    <tbody>
                        <td>foo</td>
                    </tbody>
                </table>
            </form>
        </div>
    </div>
</div>

JSfiddle

Примечание. Я использую абстрактный слой, поэтому не могу изменить класс <form>.

Как получить форму с помощью Twitter-Bootstrap?

FYI: Я также пробовал с pagination-centred.

Ответы

Ответ 1

Оба опубликованных ответа действительны и работают, поэтому я их поддержал. Вот еще один метод, который я не видел.

Вы можете центрировать форму, установив ее на display:inline-block и центрируя ее в контейнере .center, используя text-align:center. Таким образом, форма будет центрировать независимо от ширины внутри этого контейнера:

CSS

.center {
    text-align:center;
}

.center form {
    display:inline-block;
}

Ответ 2

Нативный способ позиционирования элементов в Bootstrap использует offset. Я предполагаю, что вы используете раскладку из 12 столбцов.

Bootstrap 2

<div class="container">
    <div class="row">
        <div class="span6 offset3">
            <form>
                ...
            </form>
        </div>
    </div>
</div>

Дополнительная информация в документации

Bootstrap 3

<div class="container">
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <form>
                ...
            </form>
        </div>
    </div>
</div>

Дополнительная информация в документации

Ответ 3

Вот где я нашел свой ответ.

fooobar.com/questions/14959/...

<div class="container">
  <div class="row">
    <div class="span9 centred">
      This div will be centred.
    </div>
  </div>
</div>

и CSS:

[class*="span"].centred {
  margin-left: auto;
  margin-right: auto;
  float: none;
}

Ответ 4

Вы пробовали это?

.center form {
        display: table;
        margin: 0 auto;
    }

Это легкое и быстрое решение для меня.

Ответ 5

Ничего подобного хорошего CSS?

.center > form {
  width: 300px; // some amount to prevent using 100% width
  margin: 0 auto;
}

И измените .span6 на .span12

Jsfiddle здесь.

Ответ 6

<div class="container">

вы кодируете форму

</div>