如何将页脚中的内容居中

Question

我正在使用 wordpress 主题构建网站。我在页脚中有两个元素（一个向左浮动，第二个向右浮动）。当我调整浏览器 window 大小时，我需要使其居中（第一个下方的第二个）。我试着给 <p> 和 <div> 标签一个 class ，然后将其样式设置为 float:none; - 但是你无法检查它在网页上是否真的有效。我还附上了一张我想要的照片..

WEBPAGE

<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

也许将 align-text:center 添加到其中一个 div 和 p 标签以将图像放在新行上

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

Answer 2

首先，您将 float:left 和 float:right 保留为内联样式，因此您需要将左右浮动移至外部 css，因为您无法覆盖内联仅使用 css.

样式

其次，为左右添加一个单独的class，例如class="float-left"和class="float-right"，然后使用媒体查询来切换class的属性，例如这个：

@media (max-width: 768px) {
  .float-left  {
    float: none;
  }
  .float-right  {
    float: none;
  }
}
@media (min-width: 769px) {
  .float-left  {
    float: left;
  }
  .float-right  {
    float: right;
  }
}

第三，要在较小的屏幕上将页脚文本居中，只需将 text-align: center 添加到上述媒体查询中，如下所示：

@media (max-width: 768px) {
  .site-info  {
    text-align: center;
  }
  .float-left  {
    float: none;
  }
  .float-right  {
    float: none;
  }
}

最后，在 <p></p> 标签内添加图标和文本，以便它们相应地换行。

Answer 3

这是更新后的代码。对于小于 600px 的屏幕，div 将相互重叠。这可能需要调整以适合您的网站。

#left {
  float: left;
}
#right {
  float: right;
}
#center {
  text-align: center;
}
#container {
  margin-left: 12.5%;
  margin-right: 12.5%;
}
.imagefloat {
  display: block;
  float: right;
  margin: -4px 5px 0 5px;
}
@media (max-width: 600px) {
  .nofloat {
    width: 100%!important;
    text-align: center;
    float: none!important;
  }
  .imagefloat {
    float: none!important;
  }
}

<div class="site-info">
  <div id="container">
    <div id="left" class="nofloat">&copy; Copyright
      <?=d ate( 'Y'); ?>Hotel Švýcarský Dům</div>
    <div id="right" class="nofloat">
      <a class="imagefloat" href="">
        <img src="/wp-content/themes/adamos/images/gplus.png" />
      </a>
      <a class="imagefloat" href="">
        <img src="/wp-content/themes/adamos/images/facebook.png" />
      </a>
    </div>
    <div id="center">Naleznete nás na sociálních sítích:</div>
    <div class="clear"></div>
  </div>
</div>

如何将页脚中的内容居中

How to center content in footer

html

css

wordpress

responsive-design

media-queries