Kan noen forklare hvorfor du bruker display: flex; align: center;i den overordnede av denne menyen messes opp de to absolutt plassert overlegg i et barn element?
Her er en fele der du kan prøve det med og uten align: centerå få min mening. (uncomment / * Justering: center; * / i .Menyen)
https://jsfiddle.net/Hastig/wmtr87gc/
body { background-color: gray;}
.menu {
display: flex;
justify-content: center;
/* align-items: center; */
width: 100%;
padding: 5px 0;
background-color: hsl(0, 0%, 30%);
}
.menu-item {
position: relative;
display: flex;
justify-content: center;
align-items: center;
flex: 1;
font-size: 13px;
color: hsl(0, 0%, 70%);
}
.menu-item.progress {
background-color: gray;
}
.progress-bar {
position: absolute;
top: 0; bottom: 0; left: 0;
width: 83%;
background-color: hsla(191, 58%, 46%, 1);
}
.progress-value {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
color: hsl(0, 0%, 90%);
}<div class=menu>
<div class=menu-item>Stuff</div>
<div class=menu-item progress>
<div class=progress-bar></div>
<div class=progress-value>83</div>
</div>
<div class=menu-item>Things</div>
</div>
