vertical-align:middle for a span element - html

Question

I am trying to get the text in a span to align vertically in the middle relative to adjacent text. This is easily achieved, however when the text in the span takes up two lines, the text is cut-off.
To solve this problem the span either needs to expand in height when the text takes up two lines, or to somehow align the text to the middle..
A working example of the problem is here http://jsfiddle.net/BxLnN/
Any suggestions or solutions would be greatly appreciated.
The current dimensions of the containing elements must remain the same.
Cheers!
the 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>
the 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

You have got the span with position: absolute;. When you make an element absolutely positioned, it becomes a block element without any margins, and you cannot use vertical-align on them, as it works only on inline and inline-block elements.
So I suggest this 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/

Answer 2

If it's possible for you to set a fixed height to your span, like 20px or so, then you could use: line-height: 20px in your .div_head span style. That would then center the text in your span automatically.
You also don't need to set a display: inline-block and vertical-align: middle that way.
Example: http://jsfiddle.net/BxLnN/2/

Answer 3

Try this works...
You must specify width of span and position to relative and increase or decrease the value of top and 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

Try this works...
You must specify width of span and position to relative and increase or decrease the value of top and 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;
}
The Nice One Is Here
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;}