当我的网站是全尺寸时，我的内容在页脚对齐的左侧和右侧，如下所示;媒体查询 - 中心内容
<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;
}
当显示在手机上的网站，我想在跨度类的内容显示在屏幕中间，用“©客户端2016”在一行上显示的文字，和文本/图像链接显示在它下面的另一行，都居中。任何帮助表示赞赏，感谢
这里有一种方法，使用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>/*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
'text-align：center'？ –