在页脚 div 内将 div 居中

Question

我对 Web 开发还很陌生，但仍然可以 read/edit 一些东西。我正在修改具有 3 个小部件的 wordpress 主题的页脚。我能够设置页脚区域以及 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

为了达到在不同类型的设备（移动设备和台式机）上具有不同类型的内容外观的目的，您需要使用 媒体查询 做一点研究查找演示示例。

方法:

在您的案例中，按照桌面视图进行设计，然后为移动视图编写具有适当屏幕分辨率参数的@media，并编写代码使一个位于另一个下方。

Answer 2

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

但是，您运行遇到的问题是每个 div 太大，在显示内联后，一个 div 无法与另一个使用原始 width: 22em; 解决这个问题的方法是使用 百分比 ，请注意，在使用百分比时，您 必须考虑填充和边距 。这就是代码反映 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>

在页脚 div 内将 div 居中

Centering a div inside a div on footer

html

css

wordpress

containers

center