Question

我尝试了很多不同的技巧，包括display：block;，display：table;保证金：0自动;我真的不知道还有什么可以尝试。这是整个repl.it的链接：

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

以下是具体的javascript代码段：

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>`;
    }

这是CSS：

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

非常感谢任何帮助！

Answer 1

button{
display:block;
margin:0 auto;
}

<button>Hi! It's Worked.</button>

试试这个。希望它能帮到你。

Answer 2

默认情况下，按钮是内联元素（inline-block），这就是margin: 0 auto无效的原因;以及将按钮的display设置为block时的原因。

然而，这可能会产生潜在的不良副作用（即元素填充容器的宽度）。

您最好的选择是将按钮包含在div中并将text-align: center;应用于div：

.buttons {
    text-align: center;
}

<div class="buttons">
    <button class="answer-submit">SUBMIT</button>
</div>

Answer 3

您还可以将margin: 0 auto;与绝对定位项目一起使用。将您的左右设置为0;

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

＆＃13;

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

＆＃13;

<button class='answer-submit'>Click</button>

＆＃13;

我无法将我的按钮放在我的页面中心

3 个答案: