Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
294 views
in Technique[技术] by (71.8m points)

html - CSS - vertical-align not working

I got some really basic HTML & CSS:

Here's the HTML:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" media="all" href="stylesheet.css">
        <title>Hello, World!</title>
    </head>
    <body>
        <header>
            Hello<sup>World</sup>
        </header>
    </body>
</html>

Here's the CSS:

header {
    vertical-align: middle;
    height: 60px;
    background-color: #00F;
}

But the text doesn't get aligned in the middle. Why not?

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

The vertical-align property only applies to:

inline-level and 'table-cell' elements

See this link.

You could use line-height to vertically center the text, just make it bigger than the actual font-size, however it is only effective if the text spans a single line.

Alternatively you could add padding to the top and bottom of the header element by equal values.

Edited as per comment: the obvious solution if using HTML5 header element would be to make it display: table-cell; instead of the default block which I think the reset CSS's apply.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...