當我的網站是全尺寸時，我的內容在頁腳對齊的左側和右側，如下所示;媒體查詢 - 中心內容
<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'？ –