In my design, I have a toolbar with flex display and I am trying to center my span element within it. However, I seem to be missing something in the CSS.
CSS
.toolbar {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 60px;
display: flex;
align-items: center;
background-color: #1976d2;
color: white;
font-weight: 600;
}
.toolbar img {
margin: 0 16px;
}
.toolbar span {
justify-content: center;
}
HTML
<div class="toolbar" role="banner">
<span>Recipe Book</span>
</div>
I have come up with a solution by inserting spacer divs, but I would like to understand more about using justify-content : center for flex display.
HTML
<div class="toolbar" role="banner">
<div class="spacer"></div>
<span>Recipe Book</span>
<div class="spacer"></div>
</div>
CSS :
.spacer {
flex: 1;
}