Как центрировать по горизонтали и вертикали содержимое внутри 3-го ряда начальной загрузки с сетками?

Question

Я не смог найти решение, которое работает для меня.

Использование Bootstrap 3 Я хочу сделать зигзагообразную презентацию контента.

У меня есть два ряда начальной загрузки. Первый ряд делится на два цв-см-6. Первая строка содержит: iframe с видео на YouTube и div с текстом в разных заголовках.

Вторая сетка делится на col-sm-8 и col-sm-4. Второй ряд содержит: div с текстом в разных заголовках и изображением.

Проблема в том, что содержимое (iframe, текст, изображение) не центрировано в столбце.

 <div id="about" class="container-fluid">
    <div class="row">
        <div class="col-sm-6">
            <iframe width="100%" height="345" src="https://www.youtube.com/embed/tgbNymZ7vqY">
            </iframe>
        </div>
        <div class="col-sm-6 col-sm-offset-6 text-center">
            <h2>What do you need?</h2>
            <h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur</h4>
        </div>
    </div>
</div>

Это скрипка

В идеале я ищу решение, которое работает только с классами начальной загрузки 3. Я пробовал col-sm-offset-1, col-sm-offset-2 ...

Любая помощь очень ценится.

Answer 1

Поскольку Bootstrap 3 использует сетку с плавающей запятой, невозможно сделать столбцы одинаковой высоты, если вы не используете javascript.Тем не менее, вы можете смоделировать что-то вроде того, что вы хотите с vanilla html & css:

<div class="row">
    <div class="col-sm-12">
        <div class="split-centered-section">
            <div class="column">
                <div class="embed-responsive embed-responsive-16by9" style="margin: 0 auto;">
                    <iframe width="100%" height="345" src="https://www.youtube.com/embed/tgbNymZ7vqY">
                    </iframe>
                </div>
            </div>
            <div class="column">
                <div>
                    <h2>What do you need?</h2>
                    <h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur</h4>
                </div>
            </div>
        </div>
    </div>
</div>

С CSS:

.bg-grey {
            background-color: #f6f6f6;
        }

.split-centered-section {
  display: flex;
  align-items: stretch;
  margin: 0 -15px; /* negate the padding on the col-sm-12  but allows for padding below to match */
}
.split-centered-section .column {
  flex: 0 0 50%;
  display: flex;
  align-items: center; /* vertical alignment */
  justify-content: center; /* horizontal alignment */
  padding: 0 15px;
}

Answer 2

Я нашел решение, которое работает для моего сайта, используя тег html таблицы, который автоматически центрирует содержимое в td.Для больших экранов мне нужно было отрегулировать высоту контейнера из-за класса реагирования на встраивание видео (видео-контейнер увеличивается при увеличении видео).

Строка Bootstrap 3 со столбцами:

<div class="row">
        <div class="col-sm-6" style="background-color:red; height: 100%;">
            <table style="width:100%">
                <tr>
                    <td class="td-responsive-options td-yellow-bg" valign="middle" align="center">
                        <h2>What do you need?</h2>
                        <h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur</h4>
                    </td>
                </tr>
            </table>
        </div>
        <div class="col-sm-6" style="background-color:blue; height: 100%;">
            <table style="width:100%">
                <tr>
                    <td class="td-responsive-options td-gray-bg" valign="middle" align="center">
                        <div class="embed-responsive embed-responsive-16by9">
                            <iframe src="https://www.youtube.com/embed/tgbNymZ7vqY">
                            </iframe>
                        </div>
                    </td>
                </tr>
            </table>
        </div>
    </div>

Отзывчивая высота:

/* Large screens ----------- */
    @media only screen and (min-width : 1824px) {
        .container {
            height: 600px;
        }

        .td-responsive-options {
            height:600px;
        }
    }

Вы можете найти рабочее решение здесь

Answer 3

Я думаю, вам просто нужно сместить на 3, чтобы он был посередине. (12 столбцов) - (6 столбцов) = 6 оставшихся столбцов. Итак, разделите это пополам для 3 столбцов на каждой стороне. Я также добавил загрузочную адаптивную вставку, чтобы она отображалась лучше при разных размерах экрана.

<div class="row">
<div class="col-sm-6 col-sm-offset-3">
    <div class="embed-responsive embed-responsive-16by9" style="margin: 0 auto;">
        <iframe width="100%" height="345" src="https://www.youtube.com/embed/tgbNymZ7vqY">
        </iframe>
    </div>
</div>
<div class="col-sm-6 col-sm-offset-3 text-center">
    <h2>What do you need?</h2>
    <h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur</h4>
</div>