Question

我的网站存在这个小问题。我想将块标题和第二行移动到中心，按钮也保持在中心位置，如下所示：

目前它看起来像这样：

在哪里可以看到此表单在页面底部为here。这就是我自己定制的方法，我更新了这个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标题和行标题包含在一个名为heading的类中。所以现在的问题是转移到中心，开始看起来像提供的图像。

Answer 1

据我了解，您希望将文本置于中心，并将按钮置于其下方要快速解决方案，请将此类添加到您的css：

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

删除div.row

中div的col-md-6类

Answer 2

请按照以下步骤操作：

在文本块和按钮块中将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添加到按钮

在块中将元素移动到另一个下面

2 个答案: