<div id="logo">
<div class="navigation-left menu"></div>
</div>
#logo {
position: relative;
background: #0099ff url("../img/logo.png") no-repeat center center;
background-size: auto 55%;
height: 18%;
}
.navigation-left {
background-repeat: no-repeat;
background-position: center center;
height: 3%;
width: auto;
position: absolute;
padding: 3%;
box-sizing: border-box;
}
.menu {
background-image: url('../img/3lines.png');
background-size: cover;
}
I am attempting to vertically center the .navigation-left
element within the #logo
container. In order to achieve this, I believe I must utilize absolute positioning on .navigation-left
to allow for the use of auto
in the width
property. This unfortunately eliminates the possibility of using vertical-align
, as it changes the div's display
to block
. Do you have any suggestions or alternative approaches?