css - 如何使浮动的 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">▶&lt;/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;

（并删除 float:right; ）

并将其添加到您的 .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%; }​