HTML/CSS: Why is my text not vertically aligning?

Question

I feel crazy. Here is a JsFiddle with a working solution to how to vertically center some text. It's from this SO question.

But even when I copy and paste the HTML and CSS into my local files, I cannot replicate. Here is my code:

This is my HTML and CSS:

<html>
    <head>
        <link type='text/css' rel='stylesheet' href='main.css'>
    </head>
    <body>
        <div>
            <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
        </div>
    </body>
</html>

and

div {
    border: 1px solid black;
    width: 250px;
    height: 100px;
    line-height: 100px;
    text-align: center;
}
span {
    display: inline-block;
    vertical-align: middle;
    line-height: normal;      
}

This doesn't work. Here is a screenshot . What in the world is going on?

you've got to use display:table; on parent and display: table-cell; on child, otherwise it wont work, some kind of bug css — Szymon, May 15 '15 at 02:31

score 5 · Accepted Answer · answered May 15 '15 at 02:47

You have to specify your DOCTYPE. If you add this to the top of your HTML file, it will work. This will cause your page to be HTML5 instead of, I believe, transitional.

<!DOCTYPE html>

Fool around with the DTD section in Fiddle Options on the left, and you can reproduce the non-centred version.

HTML/CSS: Why is my text not vertically aligning?

1 Answers1