Кнопка центра в форме бутстрапа

У меня есть некоторые проблемы с Bootstrap. я с помощью span6 offset3 и не знаю, как нажимать кнопку центра в этой форме прямо сейчас. я попытался с помощью text-align: center, но все же он больше слева.

<div class="container">
    <div class="row">
        <div class="span6 offset3">
            <form>
                <input class="input-xxlarge" type="text" placeholder="Email..">
                <p style="line-height: 70px; text-align: center;"><button type="submit" class="btn">Confirm</button></p>
            </form>
        </div>
    </div>
</div>

Ответы

Ответ 1

Удалите этот тег <p> и добавьте кнопку внутри <div class="form-actions"> следующим образом:

<div class="form-actions">
    <button type="submit" class="btn">Confirm</button>
</div>

затем добавьте класс CSS с помощью:

.form-actions {
    margin: 0;
    background-color: transparent;
    text-align: center;
}

Здесь JS Bin demo: http://jsbin.com/ijozof/2

Найдите form-actions в документе Bootstrap здесь:

http://twitter.github.io/bootstrap/base-css.html#buttons

Ответ 2

С помощью Bootstrap 3 вы можете использовать атрибут stling 'text-center'.

<div class="col-md-3 text-center"> 
  <button id="button" name="button" class="btn btn-primary">Press Me!</button> 
</div>

Ответ 3

Width:100% и text-align:center будут работать в моем опыте

<p style="display:block; line-height: 70px; width:100%; text-align:center; margin:0 auto;"><button type="submit" class="btn">Confirm</button></p>

Ответ 4

Попробуйте добавить этот класс

class="pager"

<p class="pager" style="line-height: 70px;">
    <button type="submit" class="btn">Confirm</button>
</p>

Я пробовал мой в <div class=pager><button etc etc></div>, который хорошо работал

См. http://getbootstrap.com/components/ в разделе Pagination → Pager

Это выглядит как правильный класс начальной загрузки, чтобы центрировать это, text-align: center; предназначен для текста, а не изображений и блоков и т.д.

Ответ 5

Я делаю это так: <center></center>

<div class="form-actions">
            <center>
                    <button type="submit" class="submit btn btn-primary ">
                        Sign In <i class="icon-angle-right"></i>
                    </button>
            </center>
</div>

Ответ 6

Используя Bootstrap, правильный способ - использовать класс смещения. Используйте математику для определения левого смещения. Пример: вам нужна полная ширина кнопки на мобильном устройстве, но шириной 1/3 и в центре на планшете, рабочем столе, большом рабочем столе.

Итак, из 12 столбцов "бутстрапа" вы используете 4 для смещения, 4 для кнопки, а затем 4 - вправо.

Посмотрите, работает ли это!

Ответ 7

С помощью Bootstrap вы можете просто использовать класс text-center:

<div class="container">
    <div class="row">
        <form>
            <input class="input-xxlarge" type="text" placeholder="Email..">
        </form>

        <div class="text-center">
            <button type="submit" class="btn">Confirm</button>
        </div>
    </div>
</div>

DEMO

Ответ 8

Попробуйте указать ширину по умолчанию

отобразите ее с помощью блока и центрируйте ее с помощью поля: 0 auto;

вот так:

<p style="display:block; line-height: 70px; width:200px; margin:0 auto;"><button type="submit" class="btn">Confirm</button></p>