I might having some understanding problems with basic CSS but, even by looking on other threads I just cannot get rid of that problem. I've realized that vertical-align just works on inline elements, which is fine. But some problems come out when I actually try to vertically align a menu to the left of its logo. I still think this issue is caused by floating elements and position property, which are a huge understanding problem for me but I hope someone can just help me to deal with this, because it's starting to be a bit annoying.
HTML:
<body>
<div id="container">
<div id="logo">
<img src="https://storage.googleapis.com/gweb-uniblog-publish-prod/static/blog/images/google-200x200.7714256da16f.png"
</div>
<div id="nav-container">
<ul id="navbar">
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
<li><a href="#">Five</a></li>
</div>
</div>
</body>
CSS:
body {
margin: 0;
padding; 0;
}
#container {
margin: auto;
width: 960px;
}
#nav-container {
margin: 0;
width: 750px;
float: right;
border:1px black dashed;
height: 200px;
}
ul#navbar {
margin: 20px;
padding: 0;
list-style: none;
}
ul#navbar > li {
display: inline;
vertical-align: bottom;
}
ul#navbar > li > a {
padding: 5px;
display: block;
text-decoration: none;
font-size: 25px;
text-align: center;
float: left;
border-right: 1px black solid;
}
ul#navbar > li > a:hover {
background-color: RoyalBlue;
}
ul#navbar > li > a > p{
vertical-align: bottom;
}
My pen: http://codepen.io/Rej/pen/egKYEa
First of all there is some modifications should be made to the HTML and CSS
1- the image tag img not closed etc missing />
2- the elements that need floating in the navigation is the lis not as
so i changed it in the css.
3- logo container is div tag which is inline tag so I added display:inline-block
4- the logo image is containing empty white space which make it not appropriate for testing I replace it via placeholder
5- to align the menu you can use sudo element after and vertical-align:middle
check the demo below
body {
margin: 0;
padding; 0;
}
#container {
margin: auto;
width: 960px;
}
#nav-container {
margin: 0;
width: 750px;
float: right;
border:1px black dashed;
height: 200px;
}
ul#navbar {
margin: 20px;
padding: 0;
list-style: none;
display: inline-block;
vertical-align: middle;
}
ul#navbar:after{
content:'';
display:table;
clear:both;
}
ul#navbar > li {
display: inline;
vertical-align: bottom;
float: left;
}
ul#navbar > li > a {
padding: 5px;
display: block;
text-decoration: none;
font-size: 25px;
text-align: center;
border-right: 1px black solid;
}
ul#navbar > li > a:hover {
background-color: RoyalBlue;
}
ul#navbar > li > a > p{
vertical-align: bottom;
}
#logo{
display:inline-block;
}
div#nav-container:after {
content: '';
height: 100%;
display: inline-block;
vertical-align: middle;
}<body>
<div id="container">
<div id="logo">
<img src="https://placehold.it/200x200"/>
</div>
<div id="nav-container">
<ul id="navbar">
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
<li><a href="#">Five</a></li>
</div>
</div>
</body>Please leave a feedback if I miss-understand your question