Wie richte ich diese Bilder vertikal aus?

Ich erstelle eine Fußzeile, und ich möchte die Bilder von sozialen Netzwerken vertikal ausrichten und automatisch. Da die Größe der Quelle der Kontakte zunimmt, sind die Bilder hoch. Und ich weiß nicht weiter.Wie richte ich diese Bilder vertikal aus?

Mein Code auf jsfiddle: Demo Code

HTML

<!DOCTYPE html> 
<title>Teste</title> 

<body> 
    <footer class="footer"> 
    <div class="content"> 
     <div class="footer-right"> 
     <p><b>(43)3333-3333</b></p> 
     <p>[email protected]</p> 
     </div> 
     <div class="footer-left"> 
     <ul> 
      <li> 
      <a href="#"><img src="http://imgur.com/RVvPQt9.png" alt="Twitter"></a> 
      </li> 
      <li> 
      <a href="#"><img src="http://imgur.com/LsqUBIh.png" alt="Facebook"></a> 
      </li> 
      <li> 
      <a href="#"><img src="http://imgur.com/8PhKmDe.png" alt="Instagram"></a> 
      </li> 
      <li> 
      <a href="#"><img src="http://imgur.com/hDSPEMm.png" alt="Linkedin"></a> 
      </li> 
     </ul> 
     </div> 
    </div> 
    </footer> 
</body>

CSS

* { 
    margin: 0; 
    padding: 0; 
} 

body { 
    font-family: 'Source Sans Pro', sans-serif; 
} 

.content { 
    margin: 0 auto; 
    max-width: 1100px; 
    padding: 0 4% 0 4%; 
} 

li { 
    list-style: none; 
} 

.footer { 
    background-color: rgba(158, 158, 158, 0.42); 
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12); 
    box-sizing: border-box; 
    width: 100%; 
    text-align: left; 
    padding: 15px 0; 
    overflow: hidden; 
} 

.footer .footer-right { 
    float: right; 
} 

.footer .footer-right { 
    font-size: 18px; 
    text-align: right; 
} 

.footer .content .footer-left { 
    float: left; 
} 

.footer .content .footer-left > ul > li { 
    display: inline-block; 
} 

.footer > .content > .footer-left > ul > li > a { 
    display: block; 
} 

.footer > .content > .footer-left > ul > li > a > img { 
    height: 30px; 
    width: 30px; 
} 


/*MEDIA QUERIES*/ 

@media screen and (max-width: 400px) { 
    .footer > .content > .footer-right, 
    .footer-left { 
    float: none !important; 
    text-align: center; 
    } 
    .footer > .content > .footer-right { 
    margin-bottom: 10px; 
    } 
}

Quelle

2016-11-25 J. Marco

Genau, ich möchte die Symbole vertikal ausrichten –

in meiner Lösung habe ich mehr zur "Quelle der Kontakte" hinzugefügt, so würde ich etwas haben, um vertikal auszurichten. – WEBjuju

So gut wie es erwartet, sehr gute Arbeit. –

Verwenden Tabellenanzeige CSS - die Tabelle-Zelle bewirkt, dass die schwebenden zu arbeiten und die table-header-group und table-footer-group verursachen die Neuordnung.

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
body { 
 
    font-family: 'Source Sans Pro', sans-serif; 
 
} 
 

 
.content { 
 
    margin: 0 auto; 
 
    max-width: 1100px; 
 
    padding: 0 4% 0 4%; 
 
    min-width:92%; 
 
    display:table; 
 
} 
 

 
li { 
 
    list-style: none; 
 
} 
 

 
.footer { 
 
    background-color: rgba(158, 158, 158, 0.42); 
 
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12); 
 
    box-sizing: border-box; 
 
    width: 100%; 
 
    text-align: left; 
 
    padding: 15px 0; 
 
    overflow: hidden; 
 
} 
 

 
.footer .footer-right { 
 
    display:table-cell; 
 
    width:50%; 
 
} 
 

 
.footer .footer-right { 
 
    font-size: 18px; 
 
    text-align: right; 
 
    width:50%; 
 
} 
 

 
.footer .content .footer-left { 
 
    display:table-cell; 
 
    vertical-align:middle; 
 
} 
 

 
.footer .content .footer-left > ul > li { 
 
    display: inline-block; 
 
} 
 

 
.footer > .content > .footer-left > ul > li > a { 
 
    display: block; 
 
} 
 

 
.footer > .content > .footer-left > ul > li > a > img { 
 
    height: 30px; 
 
    width: 30px; 
 
} 
 

 

 
/*MEDIA QUERIES*/ 
 

 
@media screen and (max-width: 400px) { 
 
    .footer > .content > .footer-left { 
 
     display:table-footer-group; 
 
     width:100%; 
 
     float:none; 
 
     text-align: center; 
 
    } 
 
    .footer > .content > .footer-right { 
 
     display:table-header-group; 
 
     margin-bottom: 10px; 
 
     float:none; 
 
     width:100%; 
 
    } 
 
    .footer > .content > .footer-right p { 
 
     width:100%; 
 
     display:block; 
 
     text-align: center; 
 
    } 
 
}

<!DOCTYPE html> 
 
    <title>Teste</title> 
 
<body> 
 
    <footer class="footer"> 
 
     <div class="content"> 
 
      <div class="footer-left"> 
 
       <ul> 
 
        <li> 
 
         <a href="#"><img src="http://imgur.com/RVvPQt9.png" 
 
           alt="Twitter"></a> 
 
        </li> 
 
        <li> 
 
         <a href="#"><img src="http://imgur.com/LsqUBIh.png" 
 
           alt="Facebook"></a> 
 
        </li> 
 
        <li> 
 
         <a href="#"><img src="http://imgur.com/8PhKmDe.png" 
 
           alt="Instagram"></a> 
 
        </li> 
 
        <li> 
 
         <a href="#"><img src="http://imgur.com/hDSPEMm.png" 
 
           alt="Linkedin"></a> 
 
        </li> 
 
       </ul> 
 
      </div> 
 
      <div class="footer-right"> 
 
       <p><b>(43)3333-3333</b></p> 
 
       <p>[email protected]</p> 
 
       <p><b>(43)3333-3333</b></p> 
 
       <p>[email protected]</p> 
 
      </div> 
 
     </div> 
 
    </footer> 
 
</body>

Quelle

2016-11-25 02:27:43 WEBjuju

Großartig, das ist, was ich brauchte, gute Arbeit, mein Freund und Entschuldigung für das Englisch meines Übersetzers;) –

jsfiddle ist nur eine Sprache, die jeder sprechen kann, ich denke;) Ich habe nicht gekämpft mit der Frage. – WEBjuju

Bitte versuchen Sie diesen Code Hier ist eine einfache Möglichkeit für align vertikale

Wenn Sie vertikale Mittelfeld hinzufügen möchten Sie unten Stil für Eltern div verwenden können.

"display:table;"

und fügen Sie unter Eigenschaft für Kinder

"display:table-cell"

CSS

* { 
    margin: 0; 
    padding: 0; 
} 

body { 
    font-family: 'Source Sans Pro', sans-serif; 
} 

.content { 
    margin: 0 auto; 
    max-width: 1100px; 
    width: 100%; 
    padding: 0 4% 0 4%; 
    display: table; 
} 

li { 
    list-style: none; 
} 

.footer { 
    background-color: rgba(158, 158, 158, 0.42); 
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12); 
    box-sizing: border-box; 
    width: 100%; 
    text-align: left; 
    padding: 15px 0; 
    overflow: hidden; 
} 

.footer .footer-right { 
    float: none; 
    vertical-align: middle; 
    text-align: right; 
    display: table-cell; 
} 

.footer .footer-right { 
    font-size: 18px; 
    text-align: right; 
} 

.footer .content .footer-left { 
    display: table-cell; 
    float: none; 
    vertical-align: middle; 
    text-align:left; 
} 

.footer .content .footer-left > ul > li { 
    display: inline-block; 
} 

.footer > .content > .footer-left > ul > li > a { 
    display: block; 
} 

.footer > .content > .footer-left > ul > li > a > img { 
    height: 30px; 
    width: 30px; 
} 


/*MEDIA QUERIES*/ 

@media screen and (max-width: 400px) { 
    .footer > .content > .footer-right, .footer-left { 
     float: none !important; 
     text-align: center; 
    } 
    .footer > .content > .footer-right { 
     margin-bottom: 10px; 
    } 
}

HTML

<!DOCTYPE html> 
    <title>Teste</title> 
<body> 
    <footer class="footer"> 
     <div class="content"> 

      <div class="footer-left"> 
       <ul> 
        <li> 
         <a href="#"><img src="http://imgur.com/RVvPQt9.png" 
           alt="Twitter"></a> 
        </li> 
        <li> 
         <a href="#"><img src="http://imgur.com/LsqUBIh.png" 
           alt="Facebook"></a> 
        </li> 
        <li> 
         <a href="#"><img src="http://imgur.com/8PhKmDe.png" 
           alt="Instagram"></a> 
        </li> 
        <li> 
         <a href="#"><img src="http://imgur.com/hDSPEMm.png" 
           alt="Linkedin"></a> 
        </li> 
       </ul> 
      </div> 

      <div class="footer-right"> 
       <p><b>(43)3333-3333</b></p> 

       <p><b>(43)3333-3333</b></p> 
       <p>[email protected]</p> 
      </div> 
     </div> 
    </footer> 
</body>

JSFIDDLE

Quelle

2016-11-25 06:47:35

Wie richte ich diese Bilder vertikal aus?

Antwort

Verwandte Themen