Center Vertically Image and UL both at Once (HTML CSS) [duplicate] - html

Question

This question already has answers here:
How can I vertically align elements in a div?
(28 answers)
Flexbox: center horizontally and vertically
(14 answers)
In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
(6 answers)
How can I center text (horizontally and vertically) inside a div block?
(27 answers)
Closed 2 years ago.
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>Para</li>
<li>Sagro</li>
<li>Miasa</li>
<li>Varga</li>
</ul>
</div>
</nav>
</header>
here I am attaching the image of output which I am currently getting

Answer 1

add flex rules for the .div_nav class and remove float: right from the .nav_ul class, since justify-content: space-between is used
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 {
display: flex;
align-items: center;
justify-content: space-between;
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>Para</li>
<li>Sagro</li>
<li>Miasa</li>
<li>Varga</li>
</ul>
</div>
</nav>
</header>

Answer 2

Well, you want to say horizontal UL. You can use flex for this..
.div_nav {
width: 80%;
margin: 0px auto;
padding: 16px 32px;
background-color: rgba(139, 0, 139, 0.459);
/* Edit */
display: flex;
align-items: center;
/* This centers the elements consisting inside a flexible row div */
justify-content: space-between;
/*to keep the maximum space between consisting childs */
}
Remove the float from nav_ul