Menu
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?
260
To center both vertically and horizontally, use padding and text-align: center : I am vertically and horizontally centered.
Deprecated as an attribute Occasionally you will see “valign” used on table cells to accomplish vertical alignment. e.g. <td valign=top> . It should be noted that this attribute is deprecated and should not be used.
The CSS just sizes the div, vertically center aligns the span by setting the div's line-height equal to its height, and makes the span an inline-block with vertical-align: middle. Then it sets the line-height back to normal for the span, so its contents will flow naturally inside the block.
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.
157
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
