Adding non-centered text shifts centered elements [duplicate]

This question already has an answer here:

After putting a centered header, I add a non-centered output with JS. After the output is produced, the header shifts a bit left. What can be done to tackle this problem?

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>

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

4 Answers
4

One crazy solution might be to set you body height to the view port height, that way you start off with a scroll, avoiding the shift when the button gets pressed.

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>

I added a universal margin:0; padding:0; to your css code. The code did seem to be centered but I think the margin of -50 (that's being created by the auto margin ) is throwing off the look.

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>

IF you don't want the h1 to shift due to the scrollbar, you would have to calculate, using css calc() (and maybe some other things too), 50vw - (widthOfH1/2). This works because the vw unit (viewport width) is not affected by the scrollbar.

One way for the scrollbar to not affect the centering of the h1 would be to use JQuery.

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


I haven't tested this so I'm not 100% sure if it will work, but please tell me if it does or doesn't. You may need to rerun this code when the button is pressed.

After some googling it seems I found the easiest way to solve this problem here, on SO:

How to prevent scrollbar from repositioning web page?

html
overflow-y: scroll;



Probably, the question should be closed as duplicate, but I don't have enough reputation to do it.

* margin: 0px; padding:0px;