使页脚内容居中

Question

我正在建立一个使用wordpress主题的网站，它应该是响应性的。问题出在页脚。当您调整浏览器窗口的大小并将其缩小时，页脚的内容不会居中。我认为这是因为每个文本的浮动。当我调整窗口大小时，如何使它居中？

WEBSITE

 <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 -->

Answer 1

将文本的父div设置为100%宽度可以让文本居中对齐。

<div class="site-info">
  <div style="margin:0 auto; width: 75%;">
    <p style="float:left; width:100%">&copy; Copyright <?= date('Y'); ?> Hotel Švýcarský Dům</p>
    <div style="float:right; width:100%">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 -->

第二个div由于该div中的图像链接而稍微偏离中心。

Answer 2

对于带有社交媒体链接的div，您可以将以下内容添加到@media查询中，以获取800px以下的所有内容：

http://imgur.com/rZz9Och

这应该像上面的图像一样居中，如果这是你要做的。