添加非居中文本移动居中元素[重复]

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>

Answer 1

如果您不希望 h1 由于滚动条而移动，则必须使用 css calc()（可能还有其他一些东西）来计算 50vw - (widthOfH1/2)。这是因为 vw 单位（视口宽度）不受滚动条的影响。

滚动条不影响 h1 居中的一种方法是使用 JQuery。

$(#dictName).style.marginLeft = 'calc(50vw -'+(this.width/2)+'px)';

我没有对此进行测试，所以我不能 100% 确定它是否会起作用，但请告诉我它是否有效。按下按钮时，您可能需要重新运行此代码。

Answer 2

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

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>

Answer 3

我添加了一个通用的 { 边距：0; padding:0;} 添加到您的 CSS 代码中。代码确实似乎居中，但我认为 -50 的边距（由自动边距创建）正在摆脱外观。

let output = [];

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

* {
  margin: 0px; padding:0px;
}

button {
  /*margin-left:15px;*/
  margin-top:7px;
  font-size: 20pt;
  height: 35pt;
}

.header {
  background-color: lightgray;
 /* border: 15px solid white;*/ /*use the commented props if you still want the "indented" effect" */
  color: black;
  padding: 17px 25px;
  display: block;
  text-align: center;
  font-size: 36px;
  width: 100%;
  margin-right:auto;
  margin-left:auto;
}

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

<button onclick="spit()">
         Press me!
</button>

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

Answer 4

经过一番谷歌搜索后，我似乎在这里找到了解决此问题的最简单方法：

How to prevent scrollbar from repositioning web page?

html {
  overflow-y: scroll;
}

也许，问题应该作为重复而关闭，但我没有足够的声誉来做这件事。