javascript - 添加非居中文本移动居中元素

Question

放置一个居中的标题后，我用 JS 添加了一个非居中的输出。产生输出后，标题向左移动一点。可以做些什么来解决这个问题？

let output = [];

function spit() {
  for (let i = 0; i < 100; i++) {
    output.push(i);
  }
  document.getElementById("output").innerHTML =
    output.join("<br>");
}

.header {
  background-color: lightgray;
  border: none;
  color: black;
  padding: 17px 25px;
  display: block;
  text-align: center;
  font-size: 36px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

<h2 id="dictName" class="header">
  Testing Page
</h2>

<button style="font-size:20pt;height:35pt" onclick="spit()">
         Press me!
</button>

<p id="output">
</p>

标签： javascripthtmlcss

Answer 1

一个疯狂的解决方案可能是将您的身体高度设置为视口高度，这样您就可以从滚动开始，避免按下按钮时发生移位。

let output = [];

function spit() {
  for (let i = 0; i < 100; i++) {
    output.push(i);
  }
  document.getElementById("output").innerHTML =
    output.join("<br>");
}

body {
  min-height: 100vh;
}

.header {
  background-color: lightgray;
  border: none;
  color: black;
  padding: 17px 25px;
  display: block;
  text-align: center;
  font-size: 36px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

<h2 id="dictName" class="header">
  Testing Page
</h2>

<button style="font-size:20pt;height:35pt" onclick="spit()">
         Press me!
</button>

<p id="output">
</p>