Question

I’m sure this question has been asked many times. I believe I know the correct method, but it’s not working for me.

I have a parent element that is a table, then a child element that is a table-cell marked to align vertically centered. Then within the child element, I have a span – the span should center vertically.

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>​

I see the same concept on http://jaredjohnson.me, but it doesn’t work for me for some reason?

Answer 1

Remove float from your #bullet2 & #bullet1 DIV.