Vertically centering two floating elements respective to each other
I realise vertically centring is a topic which comes up often on here and
other websites but I'm still new to HTML and even after reading up on this
topic I'm still confused.
I've tried making a simple header element for a website which contains an
h1 title and a nav ul for the navigation links. Here is the html:
<!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 the respective 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'm trying to get the h1 title and nav list to line centre align to one
another vertically. Currently it looks like this...
With the nav element appearing at the top of the header.
I've read numerous things but I'm hesitant to just blindly copy code from
the internet without fully understanding it.
No comments:
Post a Comment