如何在不影响文本左侧的情况下更改图像的位置？

Question

CODE：

<div class="container_bottom_tip">
    <div class="container_bottom_desc">This is some text
        <img class="browser_button_img" src="images/something.png">
    </div>
</div>

---

.container_bottom_tip {
    text-align: center;
}
.container_bottom_desc {
    color: #333;
}

使用上面的代码我想稍微移动图像。因此，当我在图像上执行像margin-top这样的操作时，它会拖动文本“这是一些文本”。

我可以做什么来上下移动图像而不影响文本的定位“这是一些文字？”

Answer 1

您可以使用position：relative

然后，您可以通过更改css的“top”属性来调整图像的位置。这将移动它而不影响父div。

http://jsfiddle.net/MCJhs/

.container_bottom_tip {
    text-align: center;
}
.container_bottom_desc {
    color: #333;
}
.browser_button_img{
    position: relative;
    top: 30px;
}

Answer 2

你可以这样做：

.browser_button_img
{
    position: relative;
    top: -10px;
}

Relative Positioning将允许您相对于原来的位置移动元素，而不会影响其他元素的重排。与绝对定位不同，relative允许您维持元素占用的正常空间。