html - 将 div 置于页脚 div 内居中

Question

我对网络开发非常陌生，但仍然可以阅读/编辑一些东西。我正在修改 WordPress 主题的页脚，该主题有 3 个小部件。我能够设置页脚区域以及 3 个小部件。

我想达到两个结果: 1 - 移动版本，3 个小部件，一个在另一个下。 2 - 桌面版本，3 个内嵌可见的小部件(并排)。在第二个任务中我没有成功。

我在 footer.php 中定义

<footer>
<div id="footer-sidebar" class="secondary">
    <div id="footer-content">
        <div id="footer-sidebar1">
            <?php
            if(is_active_sidebar('footer-sidebar-1')){
            dynamic_sidebar('footer-sidebar-1');
            }
            ?>
        </div>
        <div id="footer-sidebar2" id="info-container:after">
            <?php
            if(is_active_sidebar('footer-sidebar-2')){
            dynamic_sidebar('footer-sidebar-2');
            }
            ?>
        </div>
        <div id="footer-sidebar3">
            <?php
            if(is_active_sidebar('footer-sidebar-3')){
            dynamic_sidebar('footer-sidebar-3');
            }
            ?>
        </div>

            <?php 
                wp_nav_menu(
                    array(
                        'theme_location' => 'Footer',
                        'container' => 'false',
                        'fallback_cb' => 'false',
                        'menu_class' => 'main-links pull-right',
                        'menu_id'=>'menu_footer'
                    ));
            ?>
    </div>
</div>

然后我在 CSS 中尝试了不同的东西，但没有成功，目前看起来像这样:

footer {
    background: #0c0c0c;
    color: white;    
}

footer h3{
    color: white;
    font-family: 'bangers';
    font-size: 30px;
}

#footer-sidebar {
    overflow: hidden;
    text-align: center;
}

#footer-content {
    padding-top: 20px;
    padding-bottom: 10px;
    overflow: hidden;
    margin-left: 10%;
    margin-right:10%;

#footer-sidebar1 {
    float: left;
    width: 21em;
    margin-right:5em;
    display: inline-flex;
}

#footer-sidebar2 {
    float: left;
    width: 21em;
    margin-right:5em;
    display: inline-flex;
}

#footer-sidebar3 {
    float: left;
    width: 21em;
    display: inline-flex;
}

#info-container:after {
    clear: both;
    content: "";
    display: table;
}

我尝试了不同的建议，但仍然无法设法以桌面版本为中心。非常感谢任何帮助。如果我可以进一步澄清这个问题，请告诉我。

Answer 1

@WisdmLabs 是正确的，您将需要使用媒体查询来正确调整所有内容的大小。

但是，您遇到的问题是每个 div 太大，在内联显示后，一个 div 无法与使用原始 width: 22em; 的原始 width: 22em; 并排放置是使用百分比，请注意，使用百分比时必须考虑填充和边距。这就是代码反射(reflect) width: 32%; 而不是 width: 33%; 的原因。

此外，在编写 CSS 时，如果您发现相同的规则编写了两到三次，那么很可能有一种更有效的方法来编写它!

#footer-content {

  padding-top: 20px;

  padding-bottom: 10px;

  overflow: hidden;

  margin-left: 10%;

  margin-right: 10%;

}

#footer-content > div {

  min-height: 50px;

  background: #ddd;

  width: 32%;

  float: left;

  margin-right: 1%;

}

#footer-content div:last-child {
  margin-right: 0;
  }

<div id="footer-sidebar" class="secondary">
  <div id="footer-content">
    <div id="footer-sidebar1">

    </div>
    <div id="footer-sidebar2" id="info-container:after">

    </div>
    <div id="footer-sidebar3">

    </div>

  </div>
</div>