Проблемы с размещением изображений

Question

Я ищу, чтобы переместить изображение пилы между двумя границами, так что выглядит нравится this.

Я считаю, что правильно настроил изображение, но кажется, что у меня его нет, и я ненавижу использовать прокладку, если это не так, потому что я хочу, чтобы это было семантическим, насколько это возможно для отзывчивого дизайна. Мне также нужно, чтобы он был помещен в две границы с одной границей, уложенной спереди. Предположительно, мне нужно использовать z-index для этого, но у меня этого недостаточно.

JsFiddle

Answer 1

Вы ищете что-то вроде этого:

См Демо:http://jsfiddle.net/rathoreahsan/Fcn96/

Answer 2

Вы должны использовать как Z-индекс и позиционирование.

.line 
{ 
    height:1px; 
    width:100%; 
    background:#000; 
    position:absolute; 
    left:0px; 
} 
.item1 
{ 
    top:5px; 
    z-index:5; 
} 
.item3 
{ 
    top:25px; 
    z-index:15; 
} 


<div style="width:100%; position:relative"> 
    <div class="line item1"></div> 
    <div style="position:absolute; top:0px;left:50px;z-index:10"> 
      <img src="saw.png" /> 
    </div> 
    <div class="line item3"></div> 
</div> 

(пример использует как встроенный & заблокированные ссылки CSS только для краткости. Держитесь подальше от встроенного CSS).

Answer 3

Вы можете tryo, что suggestes здесь AlphaMale: How to center image in a div horizontally and vertically

Перед вашего изображения включает в себя 'диапазон' тег. Затем добавьте эти свойства в класс «пила»:

#logo-container .saw { 
    text-align: center; 
    margin-bottom:-50px!important; 
} 

Важным является переопределение маржи: 0 авто, которое на самом деле имеет.

http://jsfiddle.net/2EKWS/1/

Answer 4

Привет Сыграли с позиционированием и попытался сделать результаты согласно вашему требованию упомянутого изображения. Я надеюсь, что это поможет вам.

CSS

#logo-container .saw { 
     left: 50%; 
     margin: 0 auto; 
     position: relative; 
     top: 46px; 
    } 
#tag-container { 
    border: 2px solid #00AC9D; 
    height: 150px; 
    margin-bottom: 5px; 
    position: relative; 
    width: 1140px; 
} 

посмотреть демо: - http://jsfiddle.net/RJVXE/16/