调整浏览器窗口大小时将页脚中的内容居中

Question

我正在使用 wordpress 主题建立一个网站。我在页脚中有两个元素（一个向左浮动，第二个向右浮动）。当我调整浏览器窗口的大小时，我需要使其居中（第一个下方的第二个）。我想我需要在媒体查询中设置float:none; 并以某种方式居中，但我无法弄清楚。

WEBPAGE LINK

HTML

<div class="site-info">
      <div style="margin:0 auto; width: 75%;">
        <p style="float:left;">&copy; Copyright <?= date('Y'); ?> Hotel Švýcarský Dům</p>
        <div style="float:right;">Naleznete nás na sociálních sítích: 
          <a style="display: block; float:right; margin:-4px 0 0 5px;" href=""><img src="/wp-content/themes/adamos/images/gplus.png" /></a>
          <a style="display: block; float:right; margin:-4px 5px 0 5px;" href=""><img src="/wp-content/themes/adamos/images/facebook.png" /></a>
        </div>
        <div class="clear"></div>
      </div>
    </div><!-- .site-info -->

我附上一张图片，这样你就可以看看我希望它在你将窗口大小调整到 800 像素以下时的样子。

Answer 1

去掉浮动位置如下图

 <div class="site-info">
  <div style="margin:0 auto; width: 75%;">
    <p >&copy; Copyright <?= date('Y'); ?> Hotel Švýcarský Dům</p>
    <div >Naleznete nás na sociálních sítích: 
      <a style="display: block;  margin:-4px 0 0 5px;" href=""><img src="/wp-content/themes/adamos/images/gplus.png" /></a>
      <a style="display: block;  margin:-4px 5px 0 5px;" href=""><img src="/wp-content/themes/adamos/images/facebook.png" /></a>
    </div>
    <div class="clear"></div>
  </div>
</div><!-- .site-info -->

你可以在你的css文件中使用@media screen

@media screen and (max-width: 300px) {
.class_name {
    float:none;
    }
}

Answer 2

以下是我在为 800 像素以下的任何内容移除浮动时为您的 HTML 执行 CSS 的方法： 你的代码：

<div class="site-info">
  <div style="margin:0 auto; width: 75%;">
    <p style="float:left;">&copy; Copyright <?= date('Y'); ?> Hotel Švýcarský Dům</p>
    <div style="float:right;">Naleznete nás na sociálních sítích: 
      <a style="display: block; float:right; margin:-4px 0 0 5px;" href=""><img src="/wp-content/themes/adamos/images/gplus.png" /></a>
      <a style="display: block; float:right; margin:-4px 5px 0 5px;" href=""><img src="/wp-content/themes/adamos/images/facebook.png" /></a>
    </div>
    <div class="clear"></div>
  </div>
</div><!-- .site-info -->

这是我用来删除这两个浮点数的媒体查询： （只需将其放在所有 CSS 底部的 CSS 文件中）

@media all and (max-width:799px) 
{
    .site-info > div p, .site-info > div > div { float:none; }
}

当视口低于 800 像素时，这将删除 p 和 div 上的浮动。