Recently, I've been delving into html and css as a way to create my own navbar. It's been quite challenging for me to properly position elements using html, especially when compared to the relative ease of doing so on Android (after some trial and error, of course).
header {
width: 100%;
position: fixed;
left: 0;
top: 0;
}
nav {
height: 64px;
background: black;
color: white;
}
div#brand {
width: 100px;
background: gray;
vertical-align: middle;
margin-left: 2em;
float: left;
}
div p {
display: block;
margin: 0;
line-height: 64px;
text-align: center;
}
div#menu {
float: right;
}
nav ul {
padding-left: 0px;
margin: 0;
}
nav li {
height: 100%;
display: inline-block;
margin: 0 1.25em;
}
nav li:hover {
background: gray;
}
nav li a {
display: inline-block;
text-decoration: none;
color: white;
text-align: center;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Navbar</title;
<!-- include index.css -->
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<header>
<nav>
<div id="brand"><p>My Brand</p></div>
<div id="menu">
<ul>
<li><a href="">LinkedIn</a></li>
<li><a href="">Github</a></li>
<li><a href="">Twitter</a></li>
</ul>
</div>
</nav>
</header>
</body>
</html>
One particular challenge I'm facing is how to vertically center the content or text of the li elements within the navbar. Any suggestions?