Переместить элементы один под другим в блоке

Question

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

изображение, как выглядело

В настоящее время этовыглядит следующим образом:

текущий вид блока

Здесь можно увидеть эту форму здесь внизу страницы.Это то, что я делаю, чтобы настроить его сам, я обновил этот класс CSS:

.heading {
font-family: GOTHAM-BOLD;
font-size: 28px;
color: #273a55;
margin-left:340px; // i added this line, but seems it mess entire look.
}

, и это PHP-код из этой формы:

<div class="footer box">
<div class="bluebg box"></div>
<div class="container">

    <div class="footermain box">
        <div class="footertop box">
            <div class="row">
                <div class="col-md-6 nopd">
                    <div class="ftleft box">
                        <div class="ftlinner box">
                           <h1 class="heading"><?php echo (get_field('news_letter_title'))?get_field('news_letter_title'):get_field('news_letter_title', 'option') ?></h1>
                            <?php echo (get_field('news_letter_tag'))?get_field('news_letter_tag'):get_field('news_letter_tag','option') ?>
                        </div>
                    </div>
                </div>
    <?php
    endwhile;

Кажется, что заголовок и строка заголовканиже, который содержится в одном классе под названием heading.Итак, теперь вопрос состоит в том, чтобы переместиться в центр, чтобы начать выглядеть, как показано на рисунке.

Answer 1

Выполните следующие действия:

• Измените свой col-md-6 класс на col-md-12 как в текстовом блоке, так и в блоке кнопок.

• Добавить класс text-centerк текстовому столбцу вот так

  <div class="col-md-12 nopd text-center" >

• Добавить стиль justify-content: center; к "footertop box" вот так:

  <div class="footertop box" style="justify-content: center;">

• Удалить класс noleft из столбца кнопки и добавить margin:0 к кнопке

Answer 2

Насколько я понимаю, вы хотите, чтобы тексты были в центре и кнопка под ними для быстрого решения, добавьте этот класс в ваш css:

.footertop.box .row {
    display: block;
    width: 100%;
    text-align: center;
}

удалите классы div col-md-6, которыенаходятся в div.row