center selects js

//
//  C E N T E R
//  S E L E C T S

$.each($("select"), function () {
  centerSelect($(this));
});

$("select").on("change", function () {
  centerSelect($(this));
});



function getTextWidth(txt) {
  const
    element = $("<span style='display: inline-block;'>" + txt + "</span>").prependTo("main"),
    elementWidth = element.width();

  element.remove();
  return elementWidth;
}

function centerSelect(element) {
  const options = element.children();

  let
    optionWidth,
    emptySpace;

  for (var i = 0; i < options.length; i++) {
    const oo = options[i];

    if (oo.selected === true) {
      optionWidth = getTextWidth(oo.text);
      emptySpace = element.width() - optionWidth;
    }
  }

  element.css("text-indent", (emptySpace / 2) - 30);
}