html - CSS - vertical-align not working

Question

Welcome To Ask or Share your Answers For Others

html - CSS - vertical-align not working

asked Oct 6, 2021 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?

question from:https://stackoverflow.com/questions/5442226/css-vertical-align-not-working

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Answer

深蓝 · Answer 1 · 2021-10-06T05:19:10+0000

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.

Categories

html - CSS - vertical-align not working

html - CSS - vertical-align not working

Please log in or register to add a comment.

Please log in or register to answer this question.

1 Answer

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags