Есть ли способ центрировать html-элементы по вертикали или по горизонтали внутри основных родителей?
Обновить: этот ответ, скорее всего, был правильным в начале 2013 года, он больше не должен использоваться. Правильное решение использует смещения.
Как и для других пользователей, существуют также собственные классы начальной загрузки, такие как:
class="text-center"
class="pagination-centered"
благодаря @Henning и @trejder
class="text-center"
.pagination-centered
в качестве альтернативы.
Установите элемент
display: block
и центрируйте черезmargin
. Доступно как mixin и класс.
<div class="center-block">...</div>
Для будущих посетителей этого вопроса:
Если вы пытаетесь центрировать изображение в div, но изображение не будет центрировать, это может описать вашу проблему:
<div class="col-sm-4 text-center">
<img class="img-responsive text-center" src="myPic.jpg" />
</div>
Класс img-responsive
добавляет инструкцию display:block
к тегу изображения, что останавливает работу text-align:center
(text-center
).
РЕШЕНИЕ:
<div class="col-sm-4">
<img class="img-responsive center-block" src="myPic.jpg" />
</div>
Добавление класса center-block
переопределяет инструкцию display:block
, введенную с помощью класса img-responsive
.
Без класса img-responsive
изображение будет сосредоточено только путем добавления text-center
class
Вы можете напрямую писать в свой файл css следующим образом:
.content {
position: absolute;
top: 50%;
left:50%;
transform: translate(-50%,-50%);
}
<div class = "content" >
<p> some text </p>
</div>
Я использую этот
<style>
html, body {
height: 100%;
margin: 0;
padding: 0 0;
}
.container-fluid {
height: 100%;
display: table;
width: 100%;
padding-right: 0;
padding-left: 0;
}
.row-fluid {
height: 100%;
display: table-cell;
vertical-align: middle;
width: 100%;
}
.centering {
float: none;
margin: 0 auto;
}
</style>
<body>
<div class="container-fluid">
<div class="row-fluid">
<div class="offset3 span6 centering">
content here
</div>
</div>
</div>
</body>
В Bootstrap 4 методы центрирования изменились.
Горизонтальный центр в BS4
text-center
по-прежнему используется для display:inline
элементовmx-auto
заменяет элементы center-block
на центр display:block
offset-*
или mx-auto
можно использовать для центрирования столбцов сетки mx-auto
(поля автоматической оси x) будут центрировать элементы display:block
или display:flex
, которые имеют определенную ширину, (%
, vw
, px
и т.д.). Flexbox используется по умолчанию на столбцах сетки, поэтому существуют также различные методы центровки flexbox.
Демо Bootstrap 4 Горизонтальное центрирование
Для вертикального центрирования в BS4 см. https://stackoverflow.com/questions/41265182/vertical-alignment-in-bootstrap-4
для горизонтального центрирования вы можете иметь что-то вроде этого:
.centering{
float:none;
margin:0 auto
}
<div class="span8 centering"></div>
<img src="img/logo.png" style="float:none; margin:0 auto" />
. Окружение img
родительским div
и предоставление .text-center
или .pagination-centered
класса родительскому классу работает как шарм.
Мне нравится это решение по аналогичному вопросу. https://stackoverflow.com/questions/11678298/centering-text-in-a-table-in-twitter-bootstrap Используйте класс bootstraps text-center
для фактических данных таблицы <td>
и элементов заголовка таблицы <th>
. Так
<td class="text-center">Cell data</td>
и
<th class="text-center">Header cell data</th>
<center></center>