Media Queries - Center Inhalt

Question

Wenn meine Website in voller Größe ist, habe ich Inhalte in der Fußzeile wie folgt links und rechts ausgerichtet:

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

Verwendung dieses CSS;

.right { 
    float: none; 
} 

.left { 
    float: none; 
} 

Wenn die Webseite auf einem Handy angezeigt wird, möchte ich der Inhalt in der Spanne Klassen in der Mitte des Bildschirms angezeigt werden, mit den ‚© Auftraggeber 2016‘ Text auf einer Zeile angezeigt werden, und die Text/Bild-Link wird in einer anderen Zeile darunter angezeigt, beide zentriert. Jede Hilfe ist willkommen, danke

Answer 1

Hier ist eine Möglichkeit, mit 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>

Und wenn Sie nicht können/nicht wollen flexbox, hier ist eine ohne

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

Fügen Sie diese in Ihrem CSS und wenn die Bildschirmgröße ist weniger als 480px wird es diesen Code stattdessen tun.

Sie können mehr über die @media Regel lesen Sie hier: http://www.w3schools.com/cssref/css3_pr_mediaquery.asp