vertical-align：span元素的中间

Question

我正在尝试使跨度中的文本相对于相邻文本在中间垂直对齐。 这很容易实现，但是当跨度中的文本占用两行时，该文本将被截断。 要解决此问题，当文本占用两行时，跨度要么需要扩大高度，要么以某种方式使文本与中间对齐。

这个问题的有效示例在这里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

您已经获得了以下position: absolute;的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;
}

小提琴： http : //jsfiddle.net/praveenscience/BxLnN/1/

Answer 2

如果可以为跨度设置一个固定的高度（例如20px左右），则可以在.div_head span样式中使用： line-height: 20px 。 然后，该文本将自动在您的span居中。

您也不需要设置display: inline-block和vertical-align: middle 。

示例： http ： //jsfiddle.net/BxLnN/2/

Answer 3

尝试这项工作...您必须指定跨度的宽度和相对位置的位置，并增加或减少top和left的值；

.div_head span {
    font-size: 0.5em;
    vertical-align: middle;
    font-weight: 200;
    border: 1px solid red;
    display: inline-block;
    position: relative;
    right: 0;
    top: -20px;
    bottom: 0;
    left: 100px;
    text-align: left;
    width: 200px;
}

Answer 4

尝试这项工作...您必须指定跨度的宽度和相对位置的位置，并增加或减少top和left的值；

.div_head span {
    font-size: 0.5em;
    vertical-align: middle;
    font-weight: 200;
    border: 1px solid red;
    display: inline-block;
    position: relative;
    right: 0;
    top: -20px;
    bottom: 0;
    left: 100px;
    text-align: left;
    width: 200px;
}

HTML中 的好人

<div class="Division_Container">
<span>Division 1</span>
<span class="Inner_Container">
six winning numbers
</span>
</div>
<div class="Division_Container">
<span>Division 2</span>
<span class="Inner_Container">
five winning numbers and rest of the nubmers to be displayede winning numbers and rest of the nubmers to be displayed
</span>
</div>
<div class="Division_Container">
<span>Division 2</span>
<span class="Inner_Container">
five winning numbers and rest of the nubmers to be displayede winning n
</span>
</div>

CSS

.Division_Container{display: block; width: 300px; background: #000; color: #fff; margin: 10px;}
.Inner_Container{display: inline-block; vertical-align: middle; left: 200px;  width: 200px; margin-left: 20px; border: 1px solid red;}
/* If you want to specify height add following */
.Division_Container:before{content: "."; display: inline-block; height: 100px; vertical-align: middle; visibility: hidden;}