How to align text to the center of this label?

Question

Im sorry if this has already been asked but I would like to find a way to align the text to the center of a label. The label has a border and is suppossed to function or look like a button. I made it a radio so that only one can be selected at a time.

CSS

@import url("https://fonts.googleapis.com/css2?family=Karla&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Inter&display=swap");

body {
  background-color: #f5f7fb;
  height: 100%;
  overflow: hidden;
}

.quiz {
  display: block;
  margin: auto;
  text-align: center;
  margin-top: 30px;
  width: 800px;
}

.question {
  font-family: "Karla";
  font-style: normal;
  font-weight: bold;
  font-size: 16px;
  line-height: 19px;
  color: #293264;
  padding-top: 10px;
  padding-bottom: 15px;
  text-align: justify;
}

.dash {
  width: 630px;
  height: 0px;
  border: 0.794239px solid #dbdef0;
  transform: rotate(-0.05deg);
  margin-left: 0;
}

.options {
  text-align: left;
  max-width: 700px;
}

.check-btn {
  opacity: 0;
}

label {
  border-radius: 10px;
  font-family: Inter;
  font-style: normal;
  font-weight: 600;
  font-size: 12px;
  line-height: 12px;
  text-align: center;
  width: fit-content;
  transition: 0.3s ease;

  background: #f5f7fb;
  border: 0.794239px solid #4d5b9e;
  box-sizing: border-box;
  border-radius: 7.94239px;

  padding-top: 5px;
  padding-bottom: 5px;
}

  const renderQuiz = quiz.map((val) => {
    let question = decodeURIComponent(val["question"]);
    let correctAnswer = decodeURIComponent(val["correct_answer"]);
    let wrongOptions = val["incorrect_answers"];
    let allOptions = [];
    wrongOptions.map((elem) => allOptions.push(decodeURIComponent(elem)));
    allOptions.push(correctAnswer);
    allOptions = shuffle(allOptions);
    //ignore the above lines : )

    function RenderOptions() {
      return allOptions.map((val) => {
        return (
          <>
            <label for={val}>
              <input
                type="radio"
                name="options"
                id={val}
                value={val}
                className="check-btn"
              />{" "}
              {val}
            </label>{" "}
            &nbsp; &nbsp;
          </>
        );
      });
    }

    return (
      <div className="container">
        <div className="question">{question}</div>
        <div className="options">
          <form>
            <RenderOptions />
          </form>
        </div>
        <hr className="dash" />
      </div>
    );
  });

[Note: - Im also looking to make it look like a button (by hiding the check and having a border around it and when one of them is clicked only the bg color of the one clicked changes). ]