如何在保持位置绝对的同时使图像浮动？

Question

我将一个完全水平的图像集中在我的div元素中，如下所示：

现在，我需要让图像向左移动，但每次我尝试这样做时图像都会从元素中消失。

float: left;不适用于position: absolute;，因此当我使用left: 0;时会发生这种情况：

我可以用什么CSS属性来解决这个问题？

我目前的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

原因是，您使用了否定margin-left。

使用left: 0时，请重置margin-left：

margin-left: 0;
left: 0;

Answer 2

删除此代码
margin-left: -25px; /* Half the width */ 或在0

上设置值

Answer 3

如果您使用float:left，则可以使用display: table添加更多内容。 希望它可以帮助你^^

Answer 4

你写了left: 50% , left: 0;次。也许这就是问题所在？ 基本上你应该使用 -

position:absolute;
lift: 0;

它应该有用。

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;
}