Although the topic of vertically centering elements is common on various websites, I am new to HTML and still find it confusing even after doing some research.
I attempted to create a basic header element for a website that includes an h1 title and a navigation ul. Here is the HTML code:
<!doctype html>
<html>
<head>
<title>Sample website</title>
<link href="css/homepage.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<h1>Website Title Here</h1>
<ul>
| <li><a href="#">Home</a></li> |
<li><a href="./about/index.html">About me</a></li> |
<li><a href="./contact/index.html">Contact me</a></li> |
<li><a href="http://throughbenslens.co.uk/blog">My blog</a></li> |
<li><a href="./portfolio/index.html">My portfolio</a></li> |
</ul>
</header>
<hr class="hrstyle" style="clear:both;"/>
</body>
</html>
And here is the corresponding CSS:
header{
max-width: 1000px;
margin:auto;
}
h1{
font-family: Helvetica;
float: left;
padding:0;
}
ul{
display: inline-block;
float: right;
padding:0;
}
li {
font-family: Helvetica;
font-variant: small-caps;
list-style-type: none;
display: inline;
}
.hrstyle{
max-width:1000px;
}
I am attempting to vertically align the h1 title and nav list in the center with each other. Currently, they are not aligned...
with the nav element appearing at the top of the header.
I have gone through several resources, but I am cautious about blindly copying code from the internet without fully grasping it.