将div与文本垂直对齐

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/