Wie man das Bild nach links schwimmt, während man die Position absuloute hält?

Question

I zentriert ein Bild perfekt horizontal in meinem div-Element wie folgt aus:

Nun, ich brauche das Bild gehen Sie nach links zu machen, aber jedesmal, wenn ich versuche, so dass das Bild zu tun, aus dem Element bekommt.

float: left; nicht mit position: absolute; arbeiten, also das ist, was passiert, wenn ich left: 0; verwenden:

Welche CSS-Eigenschaft kann ich dieses Problem beheben benutzen?

Mein aktueller CSS:

img[id=bitcoin]{ 
    /* Center image */ 
    top: 50%; 
    left: 50%; 
    width: 50px; 
    height: 50px; 
    margin-top: -25px; /* Half the height */ 
    margin-left: -25px; /* Half the width */ 
    position: absolute; 

    left: 0; 
} 

/* Balance box */ 
.balance{ 
    height: 10%; 
    margin: 20px; 
    width: 30%; 
    font-family: "smooth"; 
    background-color: white; 
    color: black; 
    box-shadow: 4px 4px lightgray; 
    display:inline-block; 
    position: fixed; 
} 

Answer 1

Der Grund hierfür ist, haben Sie eine negative margin-left verwendet.

Während left: 0 verwenden, stellen Sie bitte die margin-left auch:

margin-left: 0; 
left: 0; 

Answer 2

Entfernen Sie diesen Code
margin-left: -25px; /* Half the width */ oder legen Wert auf 0

Answer 3

wenn Sie float:left verwenden, können Sie mehr mit display: table hinzufügen. Hoffe, es kann dir helfen ^^

Answer 4

Sie schrieb left: 50% , left: 0; mal. Vielleicht ist das das Problem? Grundsätzlich sollten Sie verwenden -

position:absolute; 
lift: 0; 

Und sollte es funktionieren.

img[id=bitcoin]{ 
    /* Center image */ 
    top: 50%; 
    width: 50px; 
    height: 50px; 
    margin-top: -25px; /* Half the height */ 
    margin-left: -25px; /* Half the width */ 
    position: absolute; 
    left: 0; 
} 

/* Balance box */ 
.balance{ 
    height: 10%; 
    margin: 20px; 
    width: 30%; 
    font-family: "smooth"; 
    background-color: white; 
    color: black; 
    box-shadow: 4px 4px lightgray; 
    display:inline-block; 
    position: fixed; 
}