Сделать по центру в Bootstrap / Информация / Сниппеты Bootstrap

Сделать по центру в Bootstrap

Готовый демо пример как сделать по центру картинку, текст, кнопку или другой элемент в Bootstrap, используются только свойства CSS, центр определяется по вертикали и горизонтали.

* Предполагается явно указать высоту родительского элемента (в который помещается элемент по центру).

Версия: v1.0.1

Каталог: Сниппеты Bootstrap

Категория: Информация

Bootstrap: 3

Для CMS: HTML, Drupal, Joomla, uCoz, WordPress, Magento, OpenCart, PrestaShop

Язык: Английский

Уникальный ID: 2075

Количество символов:

Посмотрели: 3135 раз

Помощь: установка & настройка

Прокомментировали: 0 раз

Рейтинг: 5.0 / 5 - 3 голосов

Тип лицензии: CC BY 4.0

Авторство: https://goo.gl/NRCqYX

Информация: Пользователям

Информация: Правообладателям

Теги: Snippet, Demo, information, информация, по центру, сниппет, Bootstrap, center

Поделился: BootstrapТема

Добавлено: 2017-05-17 в 14:50

Метка: 1566191399

⇄ ⇅

/* container height and position */ 
.container {
position: relative;
height: 296px;
background: #20002c;
background: -webkit-linear-gradient(to right, #cbb4d4, #20002c);
background: linear-gradient(to right, #cbb4d4, #20002c);
}
/* center full element */ 
.center-element {
position: absolute;
top: 50%;
left:50%;
transform: translate(-50%,-50%);
}
</style>

<h1>BootstrapTema</h1>

</div></div>

</div></div>

<button class="btn btn-lg btn-success">center</button>

</div></div>

BootstrapTema

Сделать по центру в Bootstrap

Скриншот

Подробнее

Похожие материалы

Просмотренные материалы

Всего комментариев: 0