I am actually trying to design the navbar for website and I am facing issue , I have one logo to show on the left and UL to right side on nav , I have created both and now I want them both to be center-vertical in their div container , unfortunately I am not able to center-vertical UL tag , need some help in css or html !
Here I am attaching the html
header {
height: 100vh;
background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(../../img/static/cover.jpg);
background-size: cover;
background-repeat: no-repeat;
}
.div_nav {
overflow: auto;
width: 80%;
margin: 0px auto;
padding: 16px 32px;
background-color: rgba(139, 0, 139, 0.459);
}
.nav_logo {
background-color: darkorange;
height: 72px;
width: auto;
}
.nav_ul {
background-color: darkslateblue;
float: right;
margin: auto 0px;
list-style: none;
}
.nav_ul li {
margin-left: 16px;
display: inline-block;
}
.nav_ul li a {
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-family: 'Montserrat', sans-serif;
}
<header>
<nav>
<div class="div_nav">
<img src="././img/static/logo.png" alt="Bbooster_Logo" class="nav_logo">
<ul class="nav_ul">
<li><a href="#">Para</a></li>
<li><a href="#">Sagro</a></li>
<li><a href="#">Miasa</a></li>
<li><a href="#">Varga</a></li>
</ul>
</div>
</nav>
</header>
here I am attaching the image of output which I am currently getting