Geek Answers Handbook

HTML / CSS: Why doesn't my text align vertically?

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

But even when I copy and paste 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 does not work. Here is a screenshot. What is happening in the world?

+4
source share
1 answer

You must 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 think, transitional.

<!DOCTYPE html>

Take a look at the DTD section in the "Script Settings" section on the left, and you can play the off-center version.

+5
source

More articles:


All Articles