Javascript Can'；当屏幕宽度改变时，不要使div元素居中

大家好，我正在完成我的简单数学函数绘图仪的最后一步，然后当我使用开发人员工具查看它在手机上的外观时，我意识到标题文本不像在普通版本（pc屏幕）上那样居中，所以我尝试添加一些媒体查询，但仍然无法工作。（在移动版上它总是向左），顺便说一下，元数据中的初始比例设置为1.0。 这是代码，希望你能帮助我

HTML

另外，如果您想查看整个应用程序源代码，请访问此codepen帖子

注意：当你切换到“手机视图”时，点击两次可以看到文字不会停留在中间，从而使其全屏显示。

---

谢谢

尝试将其添加到css中

p#header {
    text-align: center;
}

---

如果希望标题始终居中于图形上方，则将图形和标题放在同一个div中。这样，标题的宽度与所有视口中图形的宽度相同

var参数={
目标：“#myFunction”，
宽度：“834”，
高度：'540'，
数据：[{
fn:'x*x'，
颜色：''，
衍生工具：{
fn:'2*x'，
updateMouseMove:true
}
},
{
fn:'x*x'，
颜色：“红色”，
衍生工具：{
fn:'2*x'，
updateMouseMove:true
}
}
],
网格：是的，
亚克斯：{
域名：[-9,9]
},
xAxis：{
域名：[-7,7]
}
};
函数图（）{
设f=document.querySelector（#function”）.value；
让color=document.querySelector（“#color”）.value；
让导数=document.querySelector（“#der”）.value；
设f2=document.querySelector（“#function2”）.value；
让color2=document.querySelector（“#color2”）.value；
让导数2=document.querySelector（“#der2”）.value；
parameters.data[0].fn=f；
parameters.data[0]。颜色=颜色；
parameters.data[0].derivative.fn=导数；
parameters.data[1].fn=f2；
parameters.data[1].color=color2；
parameters.data[1].derivative.fn=derivative2；
函数图（参数）；
};
plot（）；

@font-face{
字体系列：“字体”；
src:url（“Almarai Regular.ttf”）；
}
@字体{
字体系列：“Font2”；
src:url（“Cairo Regular.ttf”）；
}
@字体{
字体系列：“Font3”；
src:url（“markazitextregular.ttf”）；
}
#密谋{
触摸动作：无；
浮动：左；
}
.层{
显示：网格；
网格模板列：自动；
栅隙：0px；
}
#绘图设置{
浮动：对；
填充：0px；
}
#职能1{
边缘顶部：20px；
字体系列：Font2；
字号：18px；
}
.输入{
宽度：110px；
浮动：左；
右边距：20px；
填充：10px；
边框：1pxRGB（15,97,74）实心；
边界半径：7px；
}
桌子{
边界塌陷：塌陷；
}
桌子
运输署，
th{
边框：1px纯黑；
填充：8px 15px；
}
.桌面{
文本对齐：居中；
字体系列：字体；
高度：30px；
}
th{
字体系列：字体；
字体大小：20px；
高度：50px；
}
#收割台容器{
显示：块；
左边距：自动；
右边距：自动；
利润上限：-35px；
宽度：100%；
}
#标题{
字体系列：Font3；
字体大小：45px；
文本对齐：居中；
}

文件

اعدادات المنحنيات
المنحنى الأول
دستور الدالة 1 : 

مشتقة الدالة 1 : 


لون المنحني : 

المنحنى الثاني
دستور الدالة 2 : 

مشتقة الدالة 2 : 

لون المنحني : 

您的标题始终根据视口的宽度居中。但是，由于您创建的图形的宽度大于您滚动查看图形所需的最大移动宽度。水平滚动时，标题不会保持在中心，这是HTML和CSS的正常行为。您正在查看的功能例如“在水平滚动时固定div”。是的，我也考虑过这个问题，但是有什么解决方案吗？比如改变图形的大小？（问题是我需要使用javascript来改变它的大小，因为它来自一个库，我不确定我是否可以将媒体查询链接到javascript对象属性）您可能需要使用javascript来实现此功能。已提供原始代码的代码笔。请不要“点击并尝试”发布您的答案。打开代码笔尝试解决问题，然后提供正确的代码作为答案。感谢您的答案，但正确的答案已确定。从您的答案来看，您似乎没有检查代码笔，也没有尝试了解用户正面临的确切问题。回答时没有理解不管你回答这个问题或不解释你的答案是如何解决问题的，都没有帮助。

#header-container {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: -35px;
    width: 100%;
}

#header {
    font-family: Font3;
    font-size: 45px;
  }

p#header {
    text-align: center;
}

#header-container {
    margin-left: auto;
    margin-right: auto;
    margin-top: -35px;
    width: fit-content;
}