Выравнивание стрелок по горизонтали до столбца изображения

Question

Ниже приведена моя структура div. У меня есть 2 набора arraow сверху и снизу.

Мой вопрос заключается в том, как сделать 2 стрелки в центре и немного в сторону столбца изображений?

Вот Fiddle

Я попытался это, но не повезло

.arrows{ 
    border: 3px solid lime; 
    text-align: center; 
    left: 0; 
    right: 0; 
    margin: 0 auto; 
    display: inline-block; 
    height: auto; 
} 

HTML:

<div id="Wrapper"> 
    <div class="row"> 
     <img src="http://img42.com/p2OH4+" class="arrows" height="128" width="128" /> 
    <div id="itemWrapper"> 
     <div id="items"> 
      <div class="content"> 
       <input type="image" src="http://img42.com/p1puE+" class = "thumb" /> 
      </div> 
      <div class="content"> 
       <input type="image" src="http://img42.com/p1puE+" class = "thumb" /> 
      </div> 
      <div class="content"> 
       <input type="image" src="http://img42.com/p1puE+" class = "thumb" /> 
      </div> 
     </div> 
    </div> 
     <img src="http://img42.com/h1DoP+" class="arrows" height="128" width="128" /> 
    </div>    
</div> 

Answer 1

Ну, вы были на правильном пути с display-inline и text-align:center

Вам просто необходимо установить выравнивать свойство на родительский элемент, так что любой встроенный или дисплей-рядный HTML элемент внутри этого родительского элемента будет по центру.

#Wrapper{ 
    height: 100%; 
    border: 1px solid #f60; 
    text-align:center; 
    width:300px; 
} 

.arrows{ 
    border: 3px solid lime; 
    display:inline-block; 
    background:red; 
    position:relative; 
    z-index:10; 
} 

Вы также можете использовать отрицательные поля на #itemWrapper, чтобы компенсировать стрелки вверх и вниз.

#itemWrapper{ 
    height: 100%; 
    overflow: hidden; 
    position: relative; 
    border: 1px solid brown; 
    margin-top:-15px; 
    margin-bottom:-15px; 
} 

JSFIDDLE

Answer 2

Я хотел бы использовать положение: относительная; для class = "row" и position: absolute; для класса = "стрелки", чтобы получить перекрытие, которое вы хотите. Выньте их из потока документов. Чтобы просто заставить их просто центрироваться без перекрытия, переместите text-align: center; к содержащему элементу.

Answer 3

центрирования стрелки

Заключите стрелки в div тегов. Установите ширину div s равной ширине, чем изображения. Затем используйте text-align: center в своем css, для div.

<div class="arrow-wrapper"> 
    <img src="http://img42.com/p2OH4+" class="arrows" height="128" width="128" /> 
</div> 

CSS:

.arrow-wrapper{ 
    width: 200; 
    text-align: center; 
} 

делает их ближе

Для того, чтобы получить их ближе к изображению, дать каждому стрелку свой собственный класс:

<img src="http://img42.com/p2OH4+" class="arrows top" height="128" width="128" /> 
<img src="http://img42.com/p2OH4+" class="arrows bottom" height="128" width="128" /> 

И затем поместите css:

.top{ 
    position: relative; 
    top: 20px; 
} 
.bottom{ 
    position: relative; 
    bottom: 20px; 
} 

Answer 4

Чтобы добавить @ ответ Slavenco и обернуть это целиком, я предложил бы добавить класс «стрелка-топ» и «стрелка-вниз» класс, и настроить запас для для достижения эффекта перекрытия, который вы ищете. Вам может потребоваться настроить z-index, чтобы стрелки отображались сверху.

Я обернул каждое изображение так:

<div class="arrow arrow-top"> 
    <img src="http://img42.com/p2OH4+" class="arrows" height="128" width="128" /> 
</div> 

(Конечно, нижняя стрелка стрелка-вниз, а не стрелки сверху) и CSS выглядит следующим образом:

.arrow { width: 100%; text-align:center; } 
.arrow-top{ margin-bottom: -10px; } 
.arrow-bottom{ margin-top: -10px; } 

You может, очевидно, корректировать поля, пока вы не получите абсолютное желаемое совпадение, которое вы ищете.

https://jsfiddle.net/b899145q/12/