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

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

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 2

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

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 3

如果您不希望h1因滚动条而移动，则必须使用css calc（）（可能还有其他一些方法）计算50vw-（widthOfH1 / 2）。之所以可行，是因为vw单位（视口宽度）不受滚动条的影响。

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

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

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

Answer 4

经过一番谷歌搜索之后，看来我找到了解决此问题的最简单方法，就像这样：

How to prevent scrollbar from repositioning web page?

html {
  overflow-y: scroll;
}

可能该问题应作为重复项关闭，但我没有足够的声誉来做到这一点。

添加非居中文字会移动居中元素

4 个答案: