Bootstrap 3 выравнивание по вертикали: html5 — Bootstrap выравнивание по вертикали блоков

html5 — Bootstrap выравнивание по вертикали блоков

Суть в следующем: надо выравнять блоки по вертикали, но примеры с оф. сайта почему-то не работает. Похожий вопрос уже был, но я не понял как он это пофиксил

<div class = "container">
		<div>
			<div>1</div>
			<div>2</div> 
			<div>3</div> 
		</div>
	</div>

• html5
• bootstrap

Почему вы решили, что не работает? Если родительскому элементу колонок (.row) не задана определенная высота или колонки имеют одинаковую высоту, то эффект вы не увидите.

.row {
  height: 150px;
  border: 1px solid #060;
}

.col {
  border: 1px solid #999;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<div>
  <div>
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>
</div>

. row {
  border: 1px solid #060;
}

.col {
  border: 1px solid #999;
}

.col:nth-child(2) {
  height: 100px;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<div>
  <div>
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>
</div>

1

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

bootstrap — Как выровнять текст по вертикали и горизонтали на bootstrap4?

Задать вопрос

Вопрос задан 3 года 11 месяцев назад

Изменён 3 года 11 месяцев назад

Просмотрен 3k раз

Есть блок conteiner в нем row, а в нем текст. Этот текст по заданию должен быть посередине блока. И должен быть всегда посередине при изменении экрана. Как мне сделать это?

<div>
  <div>
    <div><h2>Привет!</h2></div>
  </div>
</div>

• bootstrap
• bootstrap4

2

Учитесь пользоваться поиском на сайте Bootstrap. Пример можно посмотреть тут.

Вариант 1:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div>
    <div>
        <div>
            <p>Текст по центру</p>
        </div>
    </div>
</div>

Вариант 2. Выравнивание и по вертикали (подробнее тут):

.d-flex{
    height: 300px;
}

<link rel="stylesheet" href="https://stackpath. bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div>
    <div>
        <div>
            <div>
                <p>Текст по центру</p>
            </div>
        </div>
    </div>
</div>

2

Используйте класс text-center Документация

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div> 
    <div>
        <div>
            <h2>Привет!</h2>
        </div>
    </div>
</div>

1

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

html — вертикальное выравнивание с помощью Bootstrap 3

Гибкая компоновка блоков

С появлением CSS Flexible Box многие кошмары веб-дизайнеров ¹ были решены. Один из самых хакерских — вертикальное выравнивание. Теперь это возможно даже в

неведомых высотах .

«Два десятилетия хакерских манипуляций подходят к концу. Может быть, не завтра, но скоро и на всю оставшуюся жизнь.»

— Легендарный CSS Эрик Мейер на W3Conf 2013

Flexible Box (или сокращенно Flexbox) — это новая система компоновки, специально разработанная для целей компоновки. В спецификации указано:

Макет

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

Как это может помочь в этом случае? Что ж, посмотрим.

---

Используя Twitter Bootstrap, у нас есть

. -- Дополнительный класс --> <дел> ... <дел> ...