html - 垂直对齐 div 与文本

Question

看来我无法掌握这个窍门，唉，这真令人沮丧。这与我之前的问题类似here .

http://jsfiddle.net/bm33e/我如何获得相对于文本垂直居中的红点？我已经尝试过解决方案和细微的变化，但无法正常工作。

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>        

再次感谢 stackoverflow 助手 :)

Answer 1

由于您的div.hi 具有相对位置并且您的.led 高度是恒定的，因此您绝对可以定位.led 并使用calc() 使其居中:

.led{
    position: absolute;
    top: calc(50% - 8px);
}

JSFiddle

---

注意:这是一个 css3 解决方案，不兼容 really old browsers