Vertically align div with text - html

Question

It seems that I can't get the hang of this, and ugh it's pretty frustrating.
This is a similar question to my previous question here.
http://jsfiddle.net/bm33e/
How would I get the red dot in vertically middle relative to the text? I've tried solutions and slight variations but couldn't get it working.
CSS
body { padding: 50px; background-color: #222; }
.led {
display: table-cell;
width: 16px;
height: 16px;
border-radius: 50%;
float: left;
}
.led-red {
background-color: #ED3029;
box-shadow: #000 0 -1px 6px 1px, inset #920 0 -1px 8px, #ED3029 0 3px 11px;
}
.led-green {
background-color: #00A448;
box-shadow: #000 0 -1px 6px 1px, inset #490 0 -1px 8px, #00A448 0 3px 11px;
}
.hi {
max-width: 40%;
-moz-box-shadow:inset 0px 0px 0px 0px #646464;
-webkit-box-shadow:inset 0px 0px 0px 0px #646464;
box-shadow:inset 0px 0px 0px 0px #646464;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #707070), color-stop(1, #646464));
background:-moz-linear-gradient(top, #707070 5%, #646464 100%);
background:-webkit-linear-gradient(top, #707070 5%, #646464 100%);
background:-o-linear-gradient(top, #707070 5%, #646464 100%);
background:-ms-linear-gradient(top, #707070 5%, #646464 100%);
background:linear-gradient(to bottom, #707070 5%, #646464 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#707070', endColorstr='#646464',GradientType=0);
background-color:#707070;
-moz-border-radius:4px;
-webkit-border-radius:4px;
border-radius:4px;
cursor:pointer;
color:#ffffff;
font-size:40px;
font-weight:bold;
padding:14px 20px;
text-align: right;
height: auto;
}
HTML
<div class="hi">
<div class="led led-red" vertical-align="middle">
</div>
Deluxe
</div>
Thanks again stackoverflow helpers :)

Answer 1

Since your div.hi has relative position and your .led height is constant, you can absolutely position .led and use calc() to center it:
.led{
position: absolute;
top: calc(50% - 8px);
}
JSFiddle
Note: this is a css3 solution is not compatible in really old browsers

Answer 2

if you don't mind unloading some of that css.
I would use the inline-block property on that div. I think its more aptly done that way.
.led {display:inline-block;}
http://jsfiddle.net/bm33e/4/