Looking to create a custom banner for my website, specifically at the top with dimensions of 700px width and 80px height.
The code snippet is as follows:
<div class="container-narrow" style="heigth: 80px;">
<img src="#" width="52" height="52" alt="my logo" />
<ul>
<li><a href="#">About</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
Css:
.container-narrow
{
margin: 0 auto;
max-width: 700px;
background: yellow;
}
ul
{
float: right;
width: 100%;
padding: 0;
margin: 0;
list-style-type: none;
}
a
{
float: right;
width: 6em;
color: black;
text-decoration: none;
padding: 0.2em 0.6em;
}
a:hover {color: #ccc; text-decoration: none;}
li {display: inline;}
My goal is to align the image and horizontal menu vertically in the center of the 80px container, with the logo on the left and the menu on the right.
I have attempted to set the height and adjust margins/padding to achieve this, but it doesn't feel like the optimal solution...