Как изменить положение изображения без его влияния на текст влево?

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 на изображении, он перетаскивает текст «Это какой-то текст» с ним.

Что можно сделать для перемещения изображения вверх или вниз без его влияния на позиционирование текста «Это какой-то текст?»

Answer 1

Вы можете сделать это:

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

Relative Positioning позволит переместить элемент относительно, где это было бы без ущерба для оплавления других элементов. В отличие от абсолютного позиционирования, относительное позволяет поддерживать нормальное пространство, занимаемое элементом.

Answer 2

Вы можете использовать позицию: относительный

Затем вы можете отрегулировать положение изображения путем изменения «сверху» свойство CSS. Это перемещает его, не затрагивая родительский div.

http://jsfiddle.net/MCJhs/

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