Using position: absolute to vertically align top navigation items - html

Question

I'm building a top navigation bar. I'd like the logo & menu items on the right to be vertically centered. To achieve this, I'm looking to set the position of the container of both logo & menu items as relative, and then set the position of logo & menu items as absolute to achieve the effect.
This successfully worked for the logo. However, it's not working for menu items, in fact, all the menu items are gone once the code below is implemented. Not sure what's going on here.
<div class="boxA">
<div class="box1">
<div class="site">
<img src="img/logo.png">
</div>
</div>
<div class="box2">
<nav class="menu">
<ul>
<li>menu1</li>
<li>menu2</li>
<li>menu3</li>
<li>menu4</li>
</ul>
</nav>
</div>
</div>
.boxA:after {
content:"";
display: block;
clear: both;
}
.boxA {
height: 100px;
position: relative;
border-bottom: 1px solid #E0DCDC;
}
.boxA img {
position: absolute;
top: 50%;
left: 3%;
transform: translate(0, -50%);
}
.box2 li {
position: absolute;
top: 50%;
transform: translate(0, -50%);
}
.box1 {
float: left;
width: auto;
}
.box2 {
float: right;
width: auto;
}
.box2 ul {
margin: 0;
padding: 0;
list-style: none;
}
.box2 li a {
display: block;
padding: 0px;
color: inherit;
text-decoration: none;
font-size: 12px;
}
.box2 li a:hover {
text-decoration: underline;
}
.box2 ul:after {
content: "";
display: block;
clear: both;
}
.box2 li {
float: left;
width: auto;
}
.box1 img {
position: absolute;
height: 20px;
}

Answer 1

body{margin:0}
.boxA {
display: flex;
flex-direction: row;
background: #b6d6f3;
border-bottom: 2px solid #8ac8ff;
justify-content: space-between;
align-items: center;
padding: 20px 5px;
}
.site img {
width: 100px;
}
.menu ul {
margin: 0;
padding: 0;
list-style-type: none;
}
.menu ul li a {
text-decoration: none;
padding: 2px 5px;
display: inline-block;
}
<div class="boxA">
<div class="box1">
<div class="site">
<img src="https://www.smashingmagazine.com/images/smashing-cat/cat-with-slippers.svg">
</div>
</div>
<div class="box2">
<nav class="menu">
<ul>
<li>menu1</li>
<li>menu2</li>
<li>menu3</li>
<li>menu4</li>
</ul>
</nav>
</div>
</div>
Try not to use css float property instead use css grid or css flex box.
EDIT 1 :
If you want to see the same result in IE without using flex property then.
.boxA:after {
content:"";
display: block;
clear: both;
}
.boxA {
height: 100px;
position: relative;
border-bottom: 1px solid #E0DCDC;
}
.boxA img {
position: absolute;
top: 50%;
left: 3%;
transform: translate(0, -50%);
}
.box2 ul {
position: absolute;
top: 50%;
transform: translate(0, -50%);
/* -- NEW -- */
right: 10px;
}
.box1 {
float: left;
/* -- NEW -- */
width: 100PX;
background-color: #cddef7;
height: 100px;
}
.box2 {
float: right;
/* -- NEW -- */
width: 50%;
background-color: #85c3f9;
height: 100px;
}
.box2 ul {
margin: 0;
padding: 0;
list-style: none;
}
.box2 li a {
display: block;
padding: 0px;
color: inherit;
text-decoration: none;
font-size: 12px;
/* --NEW-- */
padding:2px 0;
}
.box2 li a:hover {
text-decoration: underline;
}
.box2 ul:after {
content: "";
display: block;
clear: both;
}
/* DOES NOT REQUIRED--
.box2 li {
float: left;
width: auto;
}
*/
.box1 img {
position: absolute;
/* --NEW-- */
width:80px;
}
<div class="boxA">
<div class="box1">
<div class="site">
<img src="https://www.smashingmagazine.com/images/smashing-cat/cat-with-slippers.svg">
</div>
</div>
<div class="box2">
<nav class="menu">
<ul>
<li>menu1</li>
<li>menu2</li>
<li>menu3</li>
<li>menu4</li>
</ul>
</nav>
</div>
</div>