Floating Element in einem zentrierten Element

Question

Ich bin mir nicht sicher, wie ich ein Bild zentrieren würde und dann ein Link gegen die rechte Seite des Bildes schweben und die Bildposition wahren Zentrums beibehalten. Das folgende Bild ist eine Kopie von dem, was ich versuche.

Ich hoffe, es gibt eine einfache Möglichkeit, dies nur css

Answer 1

ich Sie haben keine HTML geschrieben sehe mit zu erreichen, oder einem kurzen Schnipsel Ihrer Arbeit. Aber ich bin ziemlich sicher, wenn Sie „Display: inline-block“ das Problem behoben werden: P

Answer 2

Sie können positioning, um das Bild zu horizontaler Mitte zu setzen mit der Einstellung margin: 0 auto auf der Verpackung und den Text in absoluter Position zu dieser zentrierte Wrapper div :

.wrapper { 
 
    margin: 0 auto; 
 
    width: 150px; 
 
    position: relative; 
 
} 
 
.wrapper a { 
 
    position: absolute; 
 
    right: -100px; 
 
    top: 50%; 
 
    transform: translateY(-50%); 
 
}

<div class="wrapper"> 
 
    <a href="http://example.com">Learn more &gt;</a> 
 
    <img src="http://placehold.it/150x150"> 
 
</div>

Answer 3

Hier ist eine Möglichkeit, es zu tun.

Wenden Sie position: relative auf das Bild und den Link an. Setzen Sie einen linken Rand von 50% auf das Bild.

Verwenden Sie den linken Versatz, um das Bild und die Verknüpfung um die halbe Breite des Bildes zu verschieben (vorausgesetzt, das Bild hat eine feste/nicht reagierende Breite).

Verwenden Sie den linken Rand auf der Verknüpfung, um den Leerraum zwischen dem Bild und der Verknüpfung zu steuern.

.wrap { 
 
    border: 1px dashed gray; 
 
} 
 
img { 
 
    margin-left: 50%; 
 
    position: relative; 
 
    left: -50px; 
 
    vertical-align: middle; 
 
} 
 
a { 
 
    position: relative; 
 
    left: -50px; 
 
    margin-left: 10px; 
 
}

<div class="wrap"> 
 
    <img src="http://placehold.it/100x100"> 
 
    <a href="">Learn More</a> 
 
</div>