Zentrierung von Social-Media-Icons in Fußzeile der Website

Ich bin ziemlich neu in der Welt von CSS und HTML, so entschuldige ich mich in fortgeschrittenen.Zentrierung von Social-Media-Icons in Fußzeile der Website

Ich habe ein Problem damit, meine Social-Media-Icons am unteren Rand meiner Website zu zentrieren. Sie sitzen unten schwer eher in der Mitte der Fußzeile. Beigefügt ist Screenshot des Problems und des Codes dahinter.

Image of current footer

Code-Schnipsel:

.page-footer { 
 
    background-color: #F06D71; 
 
    padding: 1em; 
 
}

<footer class="page-footer"> 
 
    <ul> 
 
    <img class="responsive-img" src="http://placehold.it/50x50"> 
 
    <img class="responsive-img" src="http://placehold.it/50x50"> 
 
    <img class="responsive-img" src="http://placehold.it/50x50"> 
 
    </ul> 
 
</footer>

ich versucht habe "padding-bottom", um das Stylesheet hinzuzufügen, aber die Symbole einfach kleiner werden, anstatt ein paar Pixel nach oben zu bewegen.

Irgendwelche Ratschläge oder irgendwelche Begriffe, die ich untersuchen sollte?

Grüße

Quelle

2016-09-05 dosebot

"align: center" nicht für Sie arbeiten? – GabMic

das ist veraltet, verwenden Sie tex-align: center; jetzt – mlegg

Sie sollten Ihren Code in Ihre Frage schreiben, nicht ein Bild davon. – Ricky

Verwendung Flexbox:

.page-footer{ 
display:flex; 
} 

.page-footer ul{ 
align-items:center; 
}

Dadurch werden die Symbole Mitte vertikal innerhalb der Fußzeile. Sie sollten die Bilder auch in <li> Tags innerhalb der Liste als Listenelemente einschließen. Wenn Sie sie auch vertikal gut zentrieren möchten, können Sie display: inline-block zu den Listenelementen hinzufügen und text-align center an die übergeordnete Liste anpassen. So ist der endgültige Code wäre:

.page-footer{ 
    display:flex; 
} 

.page-footer ul{ 
    justify-content:center; 
    text-align:center; 
} 

.page-footer ul li{ 
    display:inline-block; 
}

Auch eine weitere Sache, bemerkte ich, Sie haben die gleiche ID für alle drei Bilder hinzugefügt. Eine ID sollte eine eindeutige Kennung sein und nur für ein Element verwendet werden.

Quelle

2016-09-05 21:44:40

Here ist ein großes Werkzeug, das zu tun.

Quelle

2016-09-05 21:39:15 pa7ryk

Einfache Lösung:

für die Klasse von .page-footer eine Eigenschaft display: table hinzufügen;

wickeln Sie dann Ihre Image-Tags in einem <div> und die Eigenschaft display: table-cell zum div zuweisen und auch die Eigenschaft vertical-align: middle;.

Dadurch werden alle Elemente innerhalb dieses Elements vertikal zur Mitte des Elements ausgerichtet.

Sehen Sie diese JsFiddle, die ich als Demonstration gemacht habe.

Quelle

2016-09-05 22:08:46

Es ist nicht immer selbst für einen erfahrenen Entwickler offensichtlich. Wenn Sie nur Bilder in Ihrer Fußzeile haben möchten, können Sie einfach auffüllen. Auch Sie haben <li> innerhalb <ul> Tag vermisst.Hier ist ein Beispiel:

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width"> 
    <title>JS Bin</title> 
    <style> 
    .footer-list-item { 
     list-style-type: none; 
     display: inline-block; 
    } 

    .footer-list { 
     padding: 50px 0; 
     background: pink; 
     text-align: center; 
    } 
    </style> 
</head> 
<body> 
    <div class="footer"> 
    <ul class="footer-list"> 
     <li class="footer-list-item"><img width="50" src="https://static.jsbin.com/images/dave.min.svg" alt="Welcome to JS Bin"></li> 
     <li class="footer-list-item"><img width="50" src="https://static.jsbin.com/images/dave.min.svg" alt="Welcome to JS Bin"></li> 
     <li class="footer-list-item"><img width="50" src="https://static.jsbin.com/images/dave.min.svg" alt="Welcome to JS Bin"></li> 
    </ul> 
    </div> 
</body> 
</html>

JSBin link

Quelle

2016-09-05 23:00:03

Ein bisschen spät auf diese Antwort. Aber DANKE, das hat mein Problem gelöst! Ich lese auf Flexbox auf CSS-Tricks. Und dann habe ich das gesehen und deinen jsbin-Link zusammen mit meinem Codepen-Zeug benutzt und es hat funktioniert! :) – dosebot

Zentrierung von Social-Media-Icons in Fußzeile der Website

Antwort

Verwandte Themen