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

注意：这是really old browsers

中不兼容的css3解决方案

Answer 2

如果你不介意卸下一些css。

我会在该div上使用inline-block属性。我认为它更适合这样做。

.led {display:inline-block;}

http://jsfiddle.net/bm33e/4/

将div与文本垂直对齐

2 个答案:

JSFiddle