将页脚内容居中答案

【问题标题】：Centering the footer content将页脚内容居中
【发布时间】：2015-06-10 02:24:19
【问题描述】：

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

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

【问题讨论】：

你想居中什么？版权？您显然是左右浮动的元素。
在 p 标签 (.site-info p) 上的媒体查询中添加 float:none
.site-info p{ float: none;} .site-info {text-align: center;} 这是我在媒体查询中输入的最大宽度：800px，没有任何反应... @nevermind @Data2000

标签： html css wordpress responsive-design

【解决方案1】：

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

http://imgur.com/rZz9Och

如果这就是你想要的，那应该像上图那样居中。

【讨论】：

【解决方案2】：

将文本的父 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 稍微偏离中心。

【讨论】：