How to mix center alignment and left alignment in HTML - html

Question

I have a design for a top-of-the-page dashboard in HTML that has the following requirements:
Everything should be vertically centered within the dashboard.
It should have a button in the exact center.
It should have text centered at the 25% and 75% marks.
It should have one last group of text all the way to the left.
Like this, but not with horrible colors:
I was able to achieve the top three goals (or very close to it) using display: flex and giving appropriate sizes to everything, like so:
HTML:
<div class="header">
<span class="left-text">LEFT TEXT</span>
<button class="button">BUTTON</button>
<span class="right-text">RIGHT TEXT</span>
</div>
CSS:
.header {
position: absolute;
top: 55px;
height: 40px;
width: 100%;
background-color: beige;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.button {
height: 26px;
width: 100px;
order: 2;
flex-grow: 0;
}
.left-text {
order: 1;
flex-grow: 1;
text-align: center;
}
.right-text {
order: 3;
flex-grow: 1;
text-align: center;
}
This last requirement, though, is really throwing me for a loop; without everything being nice and centered, I feel like flex is going to need some ugly adjustments. I feel like this would be much easier if I could layer div or span elements on top of each other however I liked, but something tells me I can't. Are there any good solutions for this problem? Am I close?
EDIT: added image of mockup.

Answer 1

Hopefully this will work for you, basically it adds the more-left class and positions it relative to the header, and you move it to the left as necessary, whatever is fitting.
HTML
<div class="header">
<span class="more-left">MORE LEFT</span>
<span class="left-text">LEFT TEXT</span>
<button class="button">BUTTON</button>
<span class="right-text">RIGHT TEXT</span>
</div>
CSS
.header {
position: absolute;
top: 55px;
height: 40px;
width: 100%;
background-color: beige;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.button {
height: 26px;
width: 100px;
order: 2;
flex-grow: 0;
}
.left-text {
order: 1;
flex-grow: 1;
text-align: center;
}
.right-text {
order: 3;
flex-grow: 1;
text-align: center;
}
.more-left {
position: relative;
left: 15%; /* adjust as neccessary */
}

Answer 2

I ended up ditching Flexbox entirely, going with absolute positioning and translate in order to get the results I wanted. Here's the final code:
HTML
<div class="header">
<span class="more-left v-center">MORE LEFT</span>
<span class="left-text abs-center">LEFT TEXT</span>
<button class="button abs-center">BUTTON</button>
<span class="right-text abs-center">RIGHT TEXT</span>
</div>
CSS
.header {
position: absolute;
top: 55px;
height: 40px;
width: 100%;
background-color: beige;
}
.v-center {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
.h-center {
position: absolute;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
}
.abs-center {
position: absolute;
top: 50%;
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
.button {
height: 26px;
width: 100px;
left: 50%;
}
.more-text {
left: 10px;
}
.left-text {
left: 25%;
}
.right-text {
left: 75%;
}
EDIT: it occurred to me that you can't really combine v-center and h-center, because one of the transform entries will completely overwrite the other, instead of combining them. Hence the abs-center class.