Пытался сделать меню для сайта, примерно как на изображении
Я ещё начинающий в написании сайтов. С кучей костылей был близок к желаемому меню, но никак не получается выровнять кнопки по горизонтали.
#menu{
height: 100px;
position: absolute;
overflow: hidden;
max-width: 100%;
width: 100vw;
font-family: tahoma;
background-color: #000000;
color: #FFFFFF;
margin: 0 auto;
top: 0%;
left: 50%;
transform: translate(-50%);
vertical-align: middle;
}
.imgfloatl{
float: left;
}
.imgfloatr{
float: right;
}
#menubuttons{
width: 100%;
text-align: center;
display: table-cell;
vertical-align: middle;
height: 100px;
}
.mbut{
}
<!DOCTYPE html>
<html>
<head>
<title>ИК</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="menu">
<img src="./img/logoc.png" height="90%" style="padding-left: 2%; padding-right: 2%; padding-top: 1px;" class="imgfloatl">
<img src="./img/anketared.png" height="90%" style="padding-left: 2%; padding-right: 2%; padding-top: 1px;" class="imgfloatr">
<div id="menubuttons"><center>
<button>Кампании</button>
<button>Участники</button>
<button>Деятельность</button>
<button>Поддержка</button>
</center></div>
</div>
</body>
</html>