媒体查询 - 中心内容

Question

当我的网站是全尺寸时，我的页脚中的内容左右对齐，如下所示；

<div class="site-info">
<span class="left">© Client 2016</span>
<span class="right">Site by<a href="#"><img class="credits-img" src="http://voicecoaches.com/wp-content/uploads/2010/08/john_text.png" width="50px" align="right"></a></span>
</div>

使用这个 CSS；

.right {
   float: none;
}

.left {
   float: none;
}

当网站在手机上显示时，我希望跨度类中的内容显示在屏幕中间，“© Client 2016”文本显示在一行上，文本/图像链接显示在其下方的另一行上，均居中。任何帮助表示赞赏，谢谢

Answer 1

这是一种方法，使用flexbox

.site-info {
  background: lightgray;
  overflow: auto;
}
.right img {
  float: right;
}

@media screen and (max-width: 480px) {
  .site-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: lightgray;
  }
  .right {
    display: flex;
    align-items: center;
  }
  .right img {
    margin-left: 10px;
  }
}

<div class="site-info">
  <span class="left">© Client 2016</span>
  <span class="right">Site by <a href="#"><img class="credits-img" src="http://voicecoaches.com/wp-content/uploads/2010/08/john_text.png" width="50px"></a></span>
</div>

如果你不能/不想要flexbox，这里有一个没有

.site-info {
  background: lightgray;
  overflow: auto;
}
.right a {
  float: right;
}

@media screen and (max-width: 480px) {
  .site-info > span {
    display: block;
    text-align: center;
  }
  .right * {
    vertical-align: middle;
  }
  .right a {
    float: none;
    margin-left: 10px;
  }
}

<div class="site-info">
  <span class="left">© Client 2016</span>
  <span class="right">Site by <a href="#"><img class="credits-img" src="http://voicecoaches.com/wp-content/uploads/2010/08/john_text.png" width="50px"></a></span>
</div>

Answer 2

/*Screens up to 480px wide*/ 
@media screen and (max-width: 480px) {
    .left, .right {
        text-align: center;
    }
}

将此添加到您的 css 中，如果屏幕尺寸小于 480 像素，它将改为执行此代码。

您可以在此处阅读有关@media 规则的更多信息：http://www.w3schools.com/cssref/css3_pr_mediaquery.asp