CODEWITHSUNDEEP
htmlcss
jds
jds

Reputation: 8259

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

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?

Upvotes: 4

Views: 108

Answers (1)

Jonathan
Jonathan

Reputation: 6537

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.

Upvotes: 5

Related Questions