Как сделать плавающий div вертикально выровненным относительно высоты его контейнера

Question

Я пытаюсь вертикально выровнять плавающий div, который находится внутри родительского div. Так как родительский div может содержать различное количество контента, я бы хотел, чтобы он был выровнен по вертикали, вместо того, чтобы устанавливать фиксированный отступ для поля на плавающем div. Живой пример здесь, где правая стрелка, которую вы видите, находится в верхнем правом углу серого элемента div, но я хочу, чтобы он был вертикально отцентрирован http://jsbin.com/oriqow/1/

CSS:

.item { vertical-align:middle; border: 1px solid #999; padding: 10px; background: #e6e6e6; border-radius: 4px; }
.item > div:not(.arrow) { margin-bottom:10px; }
.arrow { float: right; }

HTML:

<div class="item">
  <div class="arrow">▶</div>
  <div>Title</div>
  <div>Sub title</div>
  <div>Another potential element here</div>
  <div>And another</div>
</div>

Answer 1

Добавьте этот стиль в ваш класс.arrow:

position: absolute;
right: 0;
top: 50%;
margin-top: -18px;

(и удалить поплавок: справа;)

И сделайте это для вашего класса.item:

position: relative;

Answer 2

http://jsfiddle.net/v8f8Q/

.item { position:relative; vertical-align:middle; border: 1px solid #999; padding: 10px; background: #e6e6e6; border-radius: 4px; }
.item > div:not(.arrow) { margin-bottom:10px; }
.arrow { position:absolute; top:45%; right:2%; }​