Центрирование кнопки Twitter-загрузки

Я делаю форму с Twitter Bootstrap, и мне очень сложно сосредоточиться на кнопке. Он содержался внутри div с интервалом 7. Ниже находится HTML, а кнопка находится в самом низу. Любые рекомендации о том, как сосредоточить эту вещь?

<div class="form span7">
  <div id="get-started">
    <div id="form-intro">
      <strong><h1>1. Get Started: Some basics</h1></strong>
    </div>
    <form class="form-horizontal">
      <div class="control-group">
        <label class="control-label" for="inputSaving">What are you saving for?</label>
        <div class="controls">
          <input class="span4" type="text" id="inputSaving" placeholder="e.g. Swimming Lessons, Birthday Party, College Fund, etc.">
        </div>
      </div>
      <div class="control-group">
        <label class="control-label" for="description">Add a short description</label>
        <div class="controls">
          <textarea class="span4" id="description" rows="4" placeholder="Describe in your own words the saving goal for this piggybank"></textarea>
        </div>
      </div>
      <div class="control-group">
        <label class="control-label" for="categoryselect">Choose a Category</label>
        <div class="controls">
          <select class="span4" id="categoryselect">
            <!-- Add some CSS and JS to make a placeholder value-->
            <option value="Kittens">Kittens</option>
            <option value="Keyboard Cat">Keyboard Cat</option>
            <option value="Twitter Bird">Twitter Bird</option>
          </select>
        </div>
      </div>
      <div class="control-group">
        <label class="control-label" for="imageselect">Choose an image</label>
        <div class="controls span4">
          <img src="piggyimage.png" id="imageselect" alt="image-select" />
        </div>
      </div>
      <div class="control-group">
        <label class="control-label" for="goal">Your Saving Goal</label>
        <div class="controls">
          <input type="text" class="span4" id="goal" placeholder="$1337">
        </div>
      </div>
      <button class="btn btn-large btn-primary" type="button">Submit</button>
    </form>
  </div>
</div>

Ответы

Ответ 1

У Bootstrap есть собственный класс центрирования с именем text-center.

<div class="span7 text-center"></div>

Ответ 2

Если вы не против немного разметки, это будет работать:

<div class="centered">
    <button class="btn btn-large btn-primary" type="button">Submit</button>
</div>

С соответствующим правилом CSS:

.centered
{
    text-align:center;
}

Мне нужно посмотреть правила CSS для класса btn, но я не думаю, что он определяет ширину, поэтому auto левое и правое поля не будут работать. Если вы добавили к кнопке один из правил span или input-, тем не менее, будут использоваться автоматические поля .

Edit:

Подтвердила мою первоначальную мысль; классы btn имеют не, имеют определенную ширину, поэтому вы не можете использовать автоматические боковые поля. Кроме того, в качестве примечаний @AndrewM вы можете просто использовать класс text-center вместо создания нового набора правил.

Ответ 3

Оберните в div, созданный классом "text-center".

Ответ 4

Вопрос немного старый, но простой способ - применить .center-block к кнопке.

Ответ 5

Поскольку вы хотите центрировать кнопку, а не текст, то, что я делал в прошлом, это добавить класс, а затем использовать этот класс для центровки кнопки:

<button class="btn btn-large btn-primary newclass" type="button">Submit</button>

и CSS:

.btn.newclass {width:25%; display:block; margin: 0 auto;}

Значение "width" зависит от вас, и вы можете играть с этим, чтобы получить правильный вид.

Стив

Ответ 6

.span7.btn { display: block;   margin-left: auto;   margin-right: auto; }

Я не совсем знаком с загрузкой, но что-то вроде выше должно сделать трюк. Возможно, нет необходимости включать все классы. Это должно центрировать кнопку внутри своего родителя, span7.

Ответ 7

Если у вас несколько кнопок, вы можете сделать следующее.

<div class="center-block" style="max-width:400px">
  <a href="#" class="btn btn-success">Accept</a>
  <a href="#" class="btn btn-danger"> Reject</a>
</div>

Ответ 8

У Bootstrap есть определенный класс для этого: центральный блок

<button type="button" class="your_class center-block"> Book </button>