Vertical align button neben Bild

Question

Ich versuche, meine Verbindung zu vertikal ausrichten Mitte in der Mitte und mein Logo zu vertikal ausrichten in der Mitte, aber nach rechts, wie das Bild unten zeigt. Ich kann das Bild perfekt funktionieren lassen. aber ich kann den Link nicht vertikal ausgerichtet in der Mitte bekommen.

Dies wird auch über die gesamte Breite sein.

.footer-logo { 
 
    display: block; 
 
    position: absolute; 
 
    right: 50px; \t 
 
    margin-top: 30px; 
 
} 
 

 
.footer-main { 
 
    height: 200px; 
 
    background-image: url(../images/backgrounds/bg-image.jpg); 
 
    background-color: grey; \t 
 
    position: relative; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
}

<div class="footer-main"> 
 
    <a class="button" href="#">My test link here</a> 
 
    <img src="http://placehold.it/100" alt="" class="footer-logo"> 
 
</div>

Answer 1

gibt es keine top-margin in CSS nur margin-top oder top

OPTION A Verwendung display:flex auf den Behälter, #footer in diesem Fall zusammen mit align-items: center; und justify-content: center;

wo align-items die Elemente im Inneren des FlexBox ausrichtet vertikal
und justify-content sie horizont

DOCs ausrichtet:

• display:flex
• align-items
• justify-content

OPTION B (nach Kommentare) scheint wie in firefox, align-items:center Anwendung wirkt sich nicht auf ein Element mit position:absolute; so i transform:translateY(-50%) zusammen hinzugefügt haben mit top:50% auf dem Logo.

dies funktioniert, weil oben: 50% bezieht sich auf 50% der Fußhöhe, und translateY (-50%) bezieht sich auf 50% der Höhe des Logos, also im Grunde bewegen Sie das Logo mit 50% von oben nach unten von der Fußhöhe, dann verschiebe es mit 50% seiner eigenen Höhe zurück und das Ergebnis ist, dass es vertikal zentriert ist.

OPTION C

mit display:inline-block zusammen mit vertical-align:middle auf dem .footer-logo wird auch funktionieren.

OPTION D

würde man mehr Option top:calc(50% - 50px) auf den .footer-logo zu verwenden, aber dies funktioniert nur, wenn die Höhe des Logos konstant bleibt.es ist nicht diese Methode verwenden zu empfehlen, aber es ist eine gute Nutzung der calc() CSS Funktion

Sie wählen;)

.footer-logo { 
 
display: block; 
 
position: absolute; 
 
right: 50px; 
 
transform: translateY(-50%); 
 
top:50%; 
 

 
} 
 

 
.footer-main { 
 
height: 200px; 
 
background-color: grey; 
 
position: relative; 
 

 

 

 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
}

<div class="footer-main"> 
 
<a class="button" href="#">My test link here</a> 
 
<img src="http://placehold.it/50x100" alt="" class="footer-logo"> 
 
</div>