如何对齐垂直居中的元素？

Question

我确信这个问题已被多次询问过。我相信我知道正确的方法，但它不适合我。

我有一个父元素是一个表，然后是一个子元素，它是一个标记为垂直居中对齐的表格单元格。然后在子元素中，我有一个跨度 - 跨度应该垂直居中。

http://jsfiddle.net/mmFcd/6/

<style type="text/css">
.breadcrumb{display:none;}
.bulletwrapper{width:840px; margin:0 auto; clear:both; overflow:auto; display:table;}
#bullet1{float:left; background:url(http://www.raceramps.com/images/trailerhaulload/BULLET1-heavy-boards.jpg) left no-repeat;}
#bullet2{float:right;background:url(http://www.raceramps.com/images/trailerhaulload/BULLET2-lightweight.jpg) left no-repeat;}
.bulletwrapper2{width:410px;  left no-repeat; height:94px; display:table-cell; vertical-align:middle;}
.bulletwrapper2 span{width:285px; float:right; border:#999 thin solid; border-radius:5px; padding:10px;}
</style>

<div class="bulletwrapper">
<div id="bullet1" class="bulletwrapper2"><span>No more heavy boards that can break, shoot like projectiles, or break your back hauling around!</span></div>
<div id="bullet2" class="bulletwrapper2"><span>Lightweight - the largest ramp weighs less than 20lbs!</span></div>

</div>​

我在http://jaredjohnson.me上看到了相同的概念，但由于某些原因它对我不起作用？

Answer 1

从float＆amp;中删除#bullet2 #bullet1 DIV。

Answer 2

这使得2个divs堆叠在中间

.breadcrumb{display:none;}
.bulletwrapper{width:840px; margin:0 auto; clear:both; overflow:auto; display:table;}
#bullet1{  background:url(http://www.raceramps.com/images/trailerhaulload/BULLET1-heavy-  boards.jpg) left no-repeat;}
#bullet2{background:url(http://www.raceramps.com/images/trailerhaulload/BULLET2-lightweight.jpg) left no-repeat;}
.bulletwrapper2{width:410px; height:94px; margin:0 auto; clear:both;  }
.bulletwrapper2 span{width:285px; float:right; border:#999 thin solid; border-radius:5px; padding:10px;clear:both;}