CODEWITHSUNDEEP
javascriptjqueryhtmlcss
JoshingYou
JoshingYou

Reputation: 11

I can't get my button to center on my page

I've tried a ton of different tricks, including display: block;, display: table; margin: 0 auto; I really don't know what else to try at this point. Here's the link to the whole repl.it:

https://repl.it/@joshing_you/Fortnite-Battle-Royale-Quiz-App

Here's the specific javascript code snippet:

function questionGenerator (score, multipleChoiceQues, completedQuestions) {
      return `
    <section class="question-section">
      <h3>${multipleChoiceQues.question}</h3>

      <form class="question-form">
        <fieldset>
          <label for="ans" class="choice">
            <input type="radio" name="option" required>
            <span>${multipleChoiceQues.answerOne}</span>
          </label>
          <br>
          <label for="ans" class="choice">
            <input type="radio" name="option">
            <span>${multipleChoiceQues.answerTwo}</span>
          </label>
          <br>
          <label for="ans" class="choice">
            <input type="radio" name="option">
            <span>${multipleChoiceQues.answerThree}</span>
          </label>
          <br>
          <label for="ans" class="choice">
            <input type="radio" name="option">
            <span>${multipleChoiceQues.answerFour}</span>
          </label>
          <br>
        </fieldset>
        <button class="answer-submit">SUBMIT</button>
      </form>
    </section>

    <section class="question-and-score">
      <span class="currentQuestion">Question: ${multipleChoiceQues.num}/10</span>
      <span class="currentScore">Score: ${score}/${completedQuestions}</span>
    </section>`;
    }

Here's the CSS:

.answer-submit {
  position: absolute;
  bottom: 100px;
  align-items: center;
}

Any help would be greatly appreciated!

Upvotes: 0

Views: 89

Answers (3)

Kevin Boucher
Kevin Boucher

Reputation: 16685

Button's are inline elements (inline-block) by default, which is why margin: 0 auto is not working; and also why it does work when you set the button's display to block.

However that could have potentially undesired side effects (namely the element fills the width of the container).

Your best bet would be to simply wrap the button in a div and apply text-align: center; to that div:

.buttons {
    text-align: center;
}
<div class="buttons">
    <button class="answer-submit">SUBMIT</button>
</div>

Upvotes: 0

justDan
justDan

Reputation: 2333

You can also use margin: 0 auto; with absolute positioned items. Set your left and right to 0;

.answer-submit {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 100px;
}


.answer-submit {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 100px;
}
<button class='answer-submit'>Click</button>

Upvotes: 0

Neeraj Pathak
Neeraj Pathak

Reputation: 759

button{
display:block;
margin:0 auto;
}
<button>Hi! It's Worked.</button>

Try this one. Hope It helps you.

Upvotes: 2

Related Questions