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

我確定這個問題已經被問了很多次。我相信我知道正確的方法，但它不適合我。如何對齊垂直居中的元素？

我有一個父元素是一個表，然後是一個子元素是一個表格單元格標記爲垂直居中對齊。然後在子元素中，我有一個跨度 - 跨度應該垂直居中。

<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相同的概念，但它不爲我工作的一些原因？

來源

2012-03-01 Jared

你應該格式化你的css並把它放在該提琴的css窗格中，這很難閱讀。 – JKirchartz 2012-03-01 18:34:05

你在你的例子中有所有的divs和沒有表格 – 2012-03-01 18:35:50

他們divs被格式化爲表格...... – Jared 2012-03-01 18:37:03

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

來源

2012-03-01 18:47:51 sandeep

感謝您的幫助！ – Jared 2012-03-01 19:21:27

本作的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;}

來源

2012-03-01 18:40:10

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

回答

相關問題