html - 如何更改图像的位置而不影响其左侧的文本？

Question

代码:

<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 之类的操作时，它会拖动文本“This is some text”。

如何在不影响文本“This is some text?”的位置的情况下向上或向下移动图像？

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