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

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中，如果屏幕尺寸小于480px，则会执行此代码。

您可以在此处详细了解@media规则：http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

媒体查询 - 中心内容

2 个答案: