html - 垂直对齐 :middle for a span element

Question

我试图让 span 中的文本相对于相邻文本在中间垂直对齐。这很容易实现，但是当跨度中的文本占用两行时，文本将被截断。为了解决这个问题，跨度要么需要在文本占据两行时扩展高度，要么以某种方式将文本对齐到中间。

问题的工作示例在这里 http://jsfiddle.net/BxLnN/

如有任何建议或解决方案，我们将不胜感激。

包含元素的当前尺寸必须保持不变。

干杯!

html

<div class="divisions_container">
    <div class="division">
        <div class="div_head">
            DIVISION 1 <span>SIX WINNING NUMBERS</span>
        </div>
        <div class="div_head">
            DIVISION 2
            <div>
                <span>FIVE WINNING NUMBERS PLUS ONE OF THE TWO SUPPLEMENTARY NUMBERS</span>
            </div>
        </div>
    </div>
</div>

CSS

/* division winnings */
.divisions_container {
    font-size: 13px;
    padding: 0 10px;
    width: 7.4cm;
    height: 8.5cm;
}
.div_head {
    margin-top: 20px;
    text-align: left;
    padding-left: 5px;
    position: relative;
    background-color: #000;
    color: #fff;
    max-height: 6mm;
    font-weight: bold;
    font-size: 1.2em;
    }
/* # winning numbers */
.div_head span {
    font-size: 0.5em;
    vertical-align: middle;
    font-weight: 200;
    border: 1px solid red;
    display: inline-block;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    left: 100px;
}

Answer 1

你得到了 span 和 position: absolute;。当你使一个元素绝对定位时，它变成了一个没有任何边距的 block 元素，你不能对它们使用 vertical-align，因为它只适用于 inline 和 inline-block 元素。

所以我建议这个 CSS:

/* division winnings */
.divisions_container {
    font-size: 13px;
    padding: 0 10px;
    width: 7.4cm;
    height: 8.7cm;
}
.div_head {
    margin-top: 20px;
    text-align: left;
    padding-left: 5px;
    position: relative;
    background-color: #000;
    color: #fff;
    max-height: 6mm;
    font-weight: bold;
    font-size: 1.2em;
    }
/* # winning numbers */
.div_head span {
    font-size: 0.5em;
    vertical-align: middle;
    font-weight: 200;
    border: 1px solid red;
    display: inline-block;

}

.div_head div {position: absolute;
    right: 0;
    top: -2px;
    bottom: 0;
    left: 100px;
}

fiddle :http://jsfiddle.net/praveenscience/BxLnN/1/