Can't center the div element when the screen width changes

Question

Hello everyone i was finishing the last touches on my simple math function plotter then when i used developer tools to see how it looks on mobiles i realized that the header text isn't centered like how it is on the normal version (pc screen) so i tried to add some media queries and still doesn't work.(it always goes to the left on the mobile version), by the way initial scale is set to 1.0 in the meta data. So here is the code and hope u help me

HTML

<div id="header-container">
  <p id="header">راسم منحنيات الدوال</P>
</div>

CSS

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

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

Also if you want to check the whole application source code visit this codepen post over here

Note: when u switch to phone view make it fullscreen by clicking twice to see that the text does't stay at the middle. Thanks

Answer 1

If you want your header to be centered above the graph at all times then put the graph and the header inside the same div. So that the width for your header is the same as the width for graph in all viewports.

 var parameters = { target: '#myFunction', width: '834', height: '540', data: [{ fn: 'x*x', color: '', derivative: { fn: '2*x', updateOnMouseMove: true } }, { fn: 'x*x', color: 'red', derivative: { fn: '2*x', updateOnMouseMove: true } } ], grid: true, yAxis: { domain: [-9, 9] }, xAxis: { domain: [-7, 7] } }; function plot() { let f = document.querySelector("#function").value; let color = document.querySelector("#color").value; let derivative = document.querySelector("#der").value; let f2 = document.querySelector("#function2").value; let color2 = document.querySelector("#color2").value; let derivative2 = document.querySelector("#der2").value; parameters.data[0].fn = f; parameters.data[0].color = color; parameters.data[0].derivative.fn = derivative; parameters.data[1].fn = f2; parameters.data[1].color = color2; parameters.data[1].derivative.fn = derivative2; functionPlot(parameters); }; plot();

 @font-face { font-family: "Font"; src: url("Almarai-Regular.ttf"); } @font-face { font-family: "Font2"; src: url("Cairo-Regular.ttf"); } @font-face { font-family: "Font3"; src: url("MarkaziText-Regular.ttf"); } #plot { touch-action: none; float: left; }.layer { display: grid; grid-template-columns: auto auto; grid-gap: 0px; } #plotSettings { float: right; padding: 0px; } #func1 { margin-top: 20px; font-family: Font2; font-size: 18px; }.input { width: 110px; float: left; margin-right: 20px; padding: 10px; border: 1px rgb(15, 97, 74) solid; border-radius: 7px; } table { border-collapse: collapse; } table, td, th { border: 1px solid black; padding: 8px 15px; }.tableheads { text-align: center; font-family: Font; height: 30px; } th { font-family: Font; font-size: 20px; height: 50px; } #header-container { display: block; margin-left: auto; margin-right: auto; margin-top: -35px; width: 100%; } #header { font-family: Font3; font-size: 45px; text-align: center; }

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width. initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> <link href="style:css" rel="stylesheet" /> </head> <body> <script src="https.//unpkg.com/d3@3/d3.min:js"></script> <script src="https.//unpkg.com/function-plot@1/dist/function-plot:js"></script> <div class="container"> <div class="layer"> <section id="plot"> <div id="header-container"> <p id="header">راسم منحنيات الدوال</p> </div> <div id="myFunction"></div> </section> <div dir="rtl" id="plot-settings"> <table> <tr> <th>اعدادات المنحنيات</th> </tr> <tr> <td class="tableheads">المنحنى الأول</td> </tr> <tr> <td> <section id="func1"> <label for="function"> دستور الدالة 1; </label> <input id="function" type="text" value="x*x" onchange="plot():" dir="ltr" class="input" /> <p></p> <label for="derivative"> مشتقة الدالة 1; </label> <input type="text" id="der" value="2*x" onchange="plot():" dir="ltr" class="input" /> <p></p> <p></p> <label for="color">لون المنحني; </label> <input type="color" id="color" onchange="plot():" dir="ltr" /> <p></p> </section> </td> </tr> <tr> <td class="tableheads">المنحنى الثاني</td> </tr> <tr> <td> <section id="func1"> <label for="function"> دستور الدالة 2; </label> <input id="function2" type="text" value="x^3" onchange="plot():" dir="ltr" class="input" /> <p></p> <label for="derivative"> مشتقة الدالة 2; </label> <input type="text" id="der2" value="3*x^2" onchange="plot():" dir="ltr" class="input" /> <p></p> <label for="color">لون المنحني; </label> <input type="color" id="color2" onchange="plot()." dir="ltr" value="Red" /> <p></p> </section> </td> </tr> </table> </div> </div> </div> <script src="script.js"></script> </body> </html>

Answer 2

Try this by adding it in to css

p#header {
    text-align: center;
}

Answer 3

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

Can't center the div element when the screen width changes

Question

3 answers

solution1
2 ACCPTED 2019-10-19 19:33:49

solution2
0 2019-10-19 19:02:42

solution3
0 2019-10-19 19:30:10

Can't center the div element when the screen width changes

Question

3 answers

solution1 2 ACCPTED 2019-10-19 19:33:49

solution2 0 2019-10-19 19:02:42

solution3 0 2019-10-19 19:30:10

solution1
2 ACCPTED 2019-10-19 19:33:49

solution2
0 2019-10-19 19:02:42

solution3
0 2019-10-19 19:30:10