个性化阅读
专注于IT技术分析

在块中将元素一个接一个地移动

我的网站有这个小问题。我想将块标题和第二行移动到中心, 然后将按钮也保持在中心, 如下所示:

形象想看

当前看起来像这样:

当前外观

在页面底部可以看到此表格。这是我自己定制的工作, 我更新了此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;

似乎包含在一个类中的标题标题和行波纹管称为标题。因此, 现在的问题是移至中心以开始看起来像所提供的图像。


#1


按着这些次序 :

  • 将文本块和按钮块中的col-md-6类更改为col-md-12。
  • 像这样将class text-center添加到text列

    <div class =” col-md-12 nopd文本中心”>

  • 添加样式justify-content:中心;这样的”页脚盒”:

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

  • 从按钮列中删除noleft类, 并向按钮添加margin:0
在此处输入图片说明

#2


据我了解, 你想使文本居中, 并在其下方的按钮以快速解决, 请将此类添加到CSS中:

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

删除div.row中的div的col-md-6类

赞(0) 打赏
未经允许不得转载:srcmini » 在块中将元素一个接一个地移动
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

觉得文章有用就打赏一下文章作者

微信扫一扫打赏