Блог

Главная - Вопросы по программированию - Как центрировать кнопку неизвестной ширины в диапазоне начальной загрузки?

Как центрировать кнопку неизвестной ширины в диапазоне начальной загрузки?

#css #twitter-bootstrap

#css #twitter-bootstrap

Вопрос:

У меня есть кнопка, сгенерированная backbone.js и jQuery.tmpl() и ширина кнопки являются вариантами. Я хочу поместить ее в раздел span6. Код показан ниже:

 <div class="row">
  <div class="span6">
    <button class="btn primary large">
      BLABLABLA
    </button>
  </div>
  <div class="span10">
    ...
  </div>
</div>

Я не знаю, как сделать кнопку центрированной в div.

Комментарии:

1. Я использую фреймворк bootstrap css для создания twitter. Их ссылка

Ответ №1:

Я не гуру CSS, но это помогает мне (центрирует кнопку в пределах span6):

 <div class="row">
  <div class="span6" style="text-align:center">
    <button class="btn primary large">
      BLABLABLA
    </button>
  </div>
</div>

Более подробную информацию о центрировании можно найти здесь.

Комментарии:

1. Начальная загрузка 3: <div class=»col-md-12″><div class=»text-center»>xxx</div></div>

Ответ №2:

Немного поздно, но вы можете использовать класс, ориентированный на разбивку по страницам, из bootstrap

 <div class="span6 pagination-centered">
  <button class="btn primary large">
    BLABLABLA
  </button>
</div>

Ответ №3:

Как насчет <a> тегов?

Если у вас есть <a> кнопка с тегом, другие подходы не будут работать, как a.btn float: left и атрибут в исходном коде начальной загрузки.

 <div style="text-align: center;">
    <a href="#" class="btn">Button text</a>
</div>

Это можно отменить 2 способами.

Решение 1

Добавьте пользовательский файл less и импортируйте bootstrap.

bootstrap-custom.меньше

 @import "bootstrap.less";
a.btn {
    float: none !important;
}

А затем скомпилируйте свой пользовательский файл less или просто укажите его в другом файле CSS:

styles.css

 a.btn {
    float: none !important;
}

Решение 2

Просто сделайте это встроенным, используя style="float: none;" :

 <div style="text-align: center;">
    <a href="#" class="btn" style="float: none;">Button text</a>
</div>

Комментарии:

1. Спасибо! это было очень полезно.

Ответ №4:

Другое решение

 <div class="row-fluid pagination-centered">
<a href="#" class="btn btn-large">Button</a>
    </div>
<div class="clearfix"></div>

Ответ №5:

У меня была такая же проблема, я завернул

 <a class="btn btn-primary" href="#" role="button">Text Here</a>

Стало

 <div class="text-center">
<a class="btn btn-primary" href="#" role="button">Text Here</a>
</div>
Метки: