middle text in a div - html

Question

Why is the text in this example: http://jsfiddle.net/7EYZe/ not in the vertical center?
How can I middle the text?
EDIT:
Now I have two or more lines of text:
http://jsfiddle.net/7EYZe/12/
How can I display this properly?

Answer 1

The following css will center text in a div by using padding instead of height:
.centerText
{
padding: 90px 0;
font-size: 18px;
border:solid 1px #000;
}

Answer 2

That's an incorrect use of vertical-align. It doesn't know what object to vertically align itself to.
Here is one dynamic, table-less solution: http://jsfiddle.net/imoda/7EYZe/14/
<style type="text/css">
div {
height:200px;
width:200px;
border:solid 1px black;
}
.aligner {
height: 100%;
width: 0;
display: inline-block;
vertical-align: middle;
}
.align {
display: inline-block;
vertical-align: middle;
}
</style>
<div>
<span class="aligner"></span>
<span class="align">blabla</span>
</div>

Answer 3

Add text-align: center; and display: table-cell; to center it in middle of the box.
div {
height:200px;
width:200px;
border:solid 1px black;
text-align: center;
vertical-align:middle;
display: table-cell;
}

Answer 4

The div is vertically aligned within whatever surrounds it. That doesn't affect what's inside. Make it smaller, in fact remove the width, and put it inside something bigger.

Answer 5

The thing is, vertical-align was mainly designed for specifying the behaviour of table-cells. Although the name suggests that any content shall be aligned in the middle, it simply does not.
You can find a very good article here about what vertical-align really is and how to achieve your intended purpose - aligning the text vertically inside your div.

Answer 6

Use line-height:200px, e.g.
div {
border:solid 1px black;
height:200px;
line-height:200px;
width:200px;
}
Also, in your example, you won't need vertical-align:middle. That style means that the div will be vertically aligned to its parent element. It doesn't mean the text inside will be vertically aligned.

Answer 7

This is way too much of a pain to do with a div. Use a table cell instead:
html: <table><tr><td>My Text</td></tr></table>
css: td { vertical-align: middle; }