Vertical Centering the Text - html

Question

I am unable to set my text as vertical-center. My text is placed in position:absolute div.
<div class="mydiv">Frameworks and Extensions</div>
and the CSS:
.mydiv{
width:100px;
height:70px;
border:1px solid red;
position:absolute;
text-align:center;
background-color:#ccc;
}
See fiddle: http://jsfiddle.net/3Zv5s
Sometimes Text will come two or one line. The text should be in vertical center like in table td.
Thanks for your valuable time and suggestion.

Answer 1

Try with this CSS:
.mydiv{
width:100px;
height:70px;
border:1px solid red;
display: table-cell;
vertical-align: middle;
text-align:center;
background-color:#ccc;
}
Try this
UPDATED
You could set container to position: absolute; and make .mydiv to display:table-cell and vertical-align:middle.
HTML -
<div id="container"><div class="mydiv">Frameworks and Extensions</div></div>
CSS -
#container{
position: absolute;
}
.mydiv{
width:100px;
height:70px;
border:1px solid red;
display: table-cell;
vertical-align: middle;
text-align:center;
background-color:#ccc;
}
Try for this

Answer 2

You could put your text into a table and use vertical-align
http://jsfiddle.net/3Zv5s/6/

Answer 3

Try this:
HTML:
<div class="mydiv">
<span class="span">Frameworks and Extensions</span>
</div>
CSS:
.mydiv{display:table-row;}
.span{display:table-cell;vertical-align:middle;height:inherit;}
Fiddle here.

Answer 4

You could use a combination of display: table and display: table-cell.
Change slightly your markup:
<div class="mydiv">
<div>Frameworks and Extensions</div>
</div>
And your CSS:
.mydiv{
width:100px;
height:70px;
border:1px solid red;
display: table;
background-color:#ccc;
overflow: hidden;
}
.mydiv div {
vertical-align: middle;
display: table-cell;
}
http://jsfiddle.net/3Zv5s/2/

Answer 5

Option #1 : table-cell
Simplest solution, but only for IE7+
<div class="mydiv">
<span>Frameworks and Extensions</span>
</div>
.mydiv {
width:100px;
height:70px;
border:1px solid red;
position:absolute;
text-align:center;
background-color:#ccc;
display: table;
}
.mydiv>span {
display: table-cell;
vertical-align: middle;
}
Fiddle
Option #2 : double span
A bit more tricky, but works under IE7
<div class="mydiv">
<span><span>Frameworks and Extensions</span></span>
</div>
.mydiv {
width:100px;
height:70px;
border:1px solid red;
position:absolute;
text-align:center;
background-color:#ccc;
display: block;
line-height: 65px; /* 70px applied on 1st span */
}
.mydiv>span {
display: inline-block;
vertical-align: middle; /* 2nd span centered */
line-height: 0;
}
.mydiv>span>span {
line-height: 20px; /* here's the "true" line-height */
}
Fiddle