How to align only one item in a flexbox horisontally?

Question

I have a flexbox, and I need the text in it to be in the centre but every other item aligned to the right. text-align doesn't work, because then everything is affected by it, so I put the text in a <span>. I am not using position: absolute and offset it from the borders of the whole page because that's not what I want. How can I have only the text in the centre?

Code:

var intRepeat = 0;

var frameTime = 50;

function changeText(obj, text, size) {
  obj.innerText = text;
  obj.style.fontSize = size;
}

function loadBar() {
  if (intRepeat == 0) {
    intRepeat = 1;
    var elem = document.getElementById("progressBar");
    document.getElementById('huntButton').style.backgroundColor = '#d1d1d1';
    var width = 1;
    var id = setInterval(frame, frameTime);

    function frame() {
      if (width >= 100) {
        clearInterval(id);
        intRepeat = 0;
      } else {
        width++;
        elem.style.width = width + "%";
      }
    }
  }
}

function hunting() {
  loadBar();
}

.main-button {
  font-family: arial;
  border: 1px solid black;
  min-width: 200px;
  max-width: 200px;
  min-height: 34px;
  max-height: 34px;
  font-size: 16px;
  vertical-align: middle;
  background-color: #fff;
  margin: 5px;
  margin-bottom: 0px;
  cursor: pointer;
  animation: boxShadowNone 0.1s;
  box-shadow: none;
}

#huntButton {
  padding: 0;
  display: flex;
  flex-direction: row-reverse;
  background-color: #fff;
}

#progressBar {
  background-color: #fff;
  width: 0%;
  height: 32.5px; /* Needs to be extending from right to left */
}

#huntText {
  position: absolute;
  align-self: center;
}

<button class="main-button" onmouseover="changeText(document.getElementById('huntText'), 'Gather Resources', '14px')" onmouseout="changeText(document.getElementById('huntText'), 'HUNT', '16px')" onclick="hunting()" id="huntButton"><span id="huntText">HUNT</span><div id="progressBar"></div></button>

Answer 1

Just specify the textAlign alignment style in the function and pass it as an argument to this function:

function changeText(obj, text_align, text, size) {
    ...
    obj.style.textAlign = text_align;
}

With further indication in the tag for each mouse event.

In css, selector #huntText add width: 100%.

And since absolute positioning is used in the child #huntText, then add position: relative for the parent #huntButton.

Also, according to the specification, button tag can only contain phrasal tags. Replace div tag with span tag.

Run this snippet and test the code:

var intRepeat = 0;

var frameTime = 50;

function changeText(obj, text_Align, text, size) {
    obj.innerText = text;
    obj.style.fontSize = size;
    obj.style.textAlign = text_Align;
}

function loadBar() {
    if (intRepeat == 0) {
        intRepeat = 1;
        var elem = document.getElementById("progressBar");
        document.getElementById("huntButton").style.backgroundColor = "#d1d1d1";
        var width = 1;
        var id = setInterval(frame, frameTime);

        function frame() {
            if (width >= 100) {
                clearInterval(id);
                intRepeat = 0;
            } else {
                width++;
                elem.style.width = width + "%";
            }
        }
    }
}

function hunting() {
    loadBar();
}

.main-button {
    font-family: arial;
    border: 1px solid black;
    min-width: 200px;
    max-width: 200px;
    min-height: 34px;
    max-height: 34px;
    font-size: 16px;
    vertical-align: middle;
    background-color: #fff;
    margin: 5px;
    margin-bottom: 0px;
    cursor: pointer;
    animation: boxShadowNone 0.1s;
    box-shadow: none;
}

#huntButton {
    padding: 0;
    display: flex;
    flex-direction: row-reverse;
    background-color: #fff;
    position: relative;
}

#progressBar {
    background-color: #fff;
    width: 0%;
    height: 32.5px; /* Needs to be extending from right to left */
}

#huntText {
    position: absolute;
    align-self: center;
    width: 100%;
}

<button
    class="main-button"
    onmouseover="changeText(document.getElementById('huntText'), 'right', 'Gather Resources', '14px')"
    onmouseout="changeText(document.getElementById('huntText'), 'center', 'HUNT', '16px')"
    onclick="hunting()"
    id="huntButton"
>
    <span id="huntText">HUNT</span>
    <span id="progressBar"></span>
</button>

Answer 2

You don't need row-revers, only use row, for horizontal and set justify-content:center for center this span and need to align vertically center to use align-items:center;