如何對齊垂直居中的元素？

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

堆棧從#bullet2 & #bullet1 DIV刪除float。

Answer 2

本作的2周的div中間

.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;}