Я использую twitter-bootstrap, и мне было довольно сложно центрировать div, у которого есть класс .btn-group (ссылка).
Обычно я использую
margin: 0 auto;
или
text-align: center;
чтобы центрировать материал в div, но он не работает, когда внутренний элемент имеет свойство float: left, которое в этом случае используется для визуальных эффектов.
Отредактировано: Это изменилось с Bootstrap 3. См. решение для Bootstrap 3 ниже.
Извлекает ли div из вопроса?
Посмотрите на этот пример: http://jsfiddle.net/EVmwe/4/
Важная часть кода:
/* a wrapper for the paginatior */
.btn-group-wrap {
text-align: center;
}
div.btn-group {
margin: 0 auto;
text-align: center;
width: inherit;
display: inline-block;
}
a {
float: left;
}
Обертка группы кнопок в пределах деления и установка div в центр выравнивания текста. Группа кнопок также должна быть перезаписана для отображения встроенного блока и унаследованной ширины.
Переписывание отображения привязок в встроенный блок и float: none, также вероятно работало бы, как сказал @Andres Ilich.
Обновление для Bootstrap 3
Как и в Bootstrap 3, у вас есть классы выравнивания (как показано в документации). Теперь вам просто нужно добавить класс text-center к родительскому. Например:
<div class="text-center">
<ul class="pagination">
<li class="disabled"><a href="#">«</a></li>
<li class="active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">»</a></li>
</ul>
</div>
См. рабочий пример здесь: http://jsfiddle.net/EVmwe/409/
Это работает для меня (Bootstrap 3):
<div class="text-center">
<div class="btn-group">
<a href=1 class="btn btn-small">1</a>
<a href=1 class="btn btn-small">2</a>
<a href=1 class="btn btn-small">3</a>
</div>
</div>
или добавьте "центрирование с разбивкой на страницы", например:
<div class="btn-toolbar pagination-centered">
<div class="btn-group">
<a href=1 class="btn btn-small">1</a>
<a href=1 class="btn btn-small">2</a>
<a href=1 class="btn btn-small">3</a>
</div>
</div>
Просто объявляйте ссылки на кнопки inline-block вместо float:left, и ваше объявление text-align:center будет работать так:
.btn-group a {
display:inline-block;
}
С Twitter Bootstrap 3 нет необходимости в каком-либо обходном пути. Просто укажите text-align: center для родительского элемента.
для начальной загрузки 4
<div class="text-center">
<div class="btn-group">
<a href="#" class="btn btn-primary">text 1</a>
<a href="#" class="btn btn-outline-primary">text 2</a>
</div>
</div>
Если кто-то хочет изменить ширину .btn-group, вы можете сделать min-width, а не ширину. Я сделал это:
HTML:
<div class="text-center">
<div class="btn-group">
<button class="btn">1</button>
<button class="btn">2</button>
</div>
</div>
CSS
.btn-group {min-width: 90%;}
.btn {width: 50%;}
Установите ширину группы btn 90% текстового центра, и каждая включенная кнопка составляет 50% от группы кнопок (45% от текстового центра).
Я использую следующее решение.
<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>
В Bootstrap 3 вам просто нужно создать структуру так же просто, как следующее изменение
<div class="btn-toolbar">
<div class="btn-group">
<button onclick="#" type="button" class="btn btn-default btn-sm">
Click 1
</button>
<button onclick="#" type="button" class="btn btn-default btn-sm">
Click 2
</button>
<button onclick="#" class="btn btn-default btn-sm" type="button">
Click 3
</button>
<button onclick="#" type="button" class="btn btn-default btn-sm">
Click 4
</button>
<button onclick="#" type="button" class="btn btn-default btn-sm">
Click 5
</button>
<button onclick="#" type="button" class="btn btn-default btn-sm">
Click 6
</button>
</div>
</div
И измените стиль только этот (переопределить загрузку), которые вынуждают поплавок влево, чтобы вы не могли заставить маркер или текстовый центр:
.btn-toolbar .btn-group {float:initial;}
Это работает для меня без особых изменений.
Бросьте btn-группу в тег p и используйте text-align: center style для p {}
p {
text-align: center;
}
<p>
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
</p>
Это помогло мне в Bootstrap v3.3
.btn-group {
margin: auto;
display: flex;
flex-direction: row;
justify-content: center;
}
<div class="btn-group mx-auto" role="group">
<a href="#" class="btn btn-outline-primary"> Button 1</a>
<a href="#" class="btn btn-outline-primary"> Button 2</a>
</div>