How to vertically align website logo and header with navbar - html

Question

I'm trying to vertically align the navbar with my website logo and header, but whenever I try to use display: inline-block; and vertical-align: middle; on the , , and tags (which are all in the same div on the top of my website), the navbar goes from horizontal to vertical which is not what I want. I'm also using Bootstrap 4.
Here's my html:
<div id="home">
<div class="page-header">
<div class="container">
<div class="row">
<div class="col-md-4">
<img src="images/test-logo.png">
<h1>Rigid Signs</h1>
</div>
<div class="col-md-8">
<ul class="nav">
<li>Home</li>
<li>Services</li>
<li>Portfolio</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</div>
</div>
and here's my CSS:
#home {
background: url('../images/workshop-testphoto.jpg') no-repeat center / cover;
height: 844px;
}
.page-header {
background: rgba(0,0,0,.6);
postion: fixed;/*not working*/
padding: 11px 0;
}
.page-header img, .page-header h1 {
display: inline-block;
vertical-align: middle;
}
.page-header img {
width: 88px;
}
.page-header h1 {
font-size: 32px;
color: white;
margin-left: 11px;
}
.page-header .nav {
float: right;
}
.page-header .nav li a {
display: inline-block;
font-size: 22px;
text-decoration: none;
color: #fff;
}
I'm not very good with bootstrap 4, but if anyone knows how I could use bootstrap 4 to also achieve my goal of vertically aligning all elements in my navbar, that would be great aswell

Answer 1

If I'm not wrong, bootstrap grid have "float" styling in it. so col-md-4 and col-md-8 will have float left. so, use inline-block instead of float, and give vertical-align middle for both div. using the current html you're showing, it will be
.row {
font-size: 0; /*to remove blank space between two inline-block element*/
}
.col-md-4, .col-md-8 {
float: none;
display: inline-block;
vertical-align: middle
}