How can I center all my contents in html?

by Code Error
Posted By: Anonymous

I wanted to center all my contents but I do not know how since I am not god in css. I tried to search online and found display: flex; justify-content: center; align-items: center;, but when I tried them it works fine but what I wanted was to center the form under the h1 and when I click calculate button the answer will go right below the calculate button. But things do not go right. When I click on calculate button, the answers show up on the right side of the form which is not what I wanted and also I wanted to center the form under the h1.

This is all my codes:

<!DOCTYPE html>
<html>
<head>
    <title>Determination of Water Flow in a Pipe</title>
    
    <style>
        body{
            display: flex;
            justify-content: center;
            align-items: center;
        }
    </style>

    <script>
        var mwInput,tInput,dx1,dx2,dy1,dy2,vx1,vx2,vy1,vy2,diameterInput,velocityInput;
        var validationText,densityResult,viscosityResult,nreResult,diameterResult;
        function calculate(){
            mwInput = document.forms["inputs"]["mwInput"].value;
            tInput = document.forms["inputs"]["tInput"].value;
            dx1 = document.forms["inputs"]["dx1"].value;
            dx2 = document.forms["inputs"]["dx2"].value;
            dy1 = document.forms["inputs"]["dy1"].value;
            dy2 = document.forms["inputs"]["dy2"].value;
            vx1 = document.forms["inputs"]["vx1"].value;
            vx2 = document.forms["inputs"]["vx2"].value;
            vy1 = document.forms["inputs"]["vy1"].value;
            vy2 = document.forms["inputs"]["vy2"].value;
            diameterInput = document.forms["inputs"]["diameterInput"].value;
            velocityInput = document.forms["inputs"]["velocityInput"].value;

            densityResult = (+dy1 + (+tInput-+dx1) * ((+dy2-+dy1)/(+dx2-+dx1))) * +mwInput;
            viscosityResult = (+vy1 + (+tInput-+vx1) * ((+vy2-+vy1)/(+vx2-+vx1))) * (0.000001);
            diameterResult = +diameterInput * (0.0254);

            nreResult = (+diameterResult*+velocityInput*+densityResult)/(+viscosityResult);

            document.getElementById("density").innerHTML = "ρ = " + densityResult;
            document.getElementById("viscosity").innerHTML = "μ = " + viscosityResult;
            document.getElementById("diameter").innerHTML = "D = " + diameterResult;
            document.getElementById("velocity").innerHTML = "V = " + velocityInput;
            document.getElementById("nre").innerHTML = "Nre = " + nreResult;
        }
    </script>
    
</head>

<body>
    <form name = "inputs" action="javascript:calculate();" >
        <h1>Determination of Water Flow in a Pipe</h1>
        <span>MW of Substance: </span> 
        <input type="text" style="width: 100px;" name = "mwInput"><br><br>
        <span>Enter value of T: </span> 
        <input type="text" style="width: 100px;" name= "tInput"><br><br>
        <span>Density</span><br>
        <span>X</span>
        <span id="dy">Y</span><br>
        <input type="text" style="width: 100px;" name = "dx1">
        <input type="text" style="width: 100px;" name = "dy1"><br>
        <input type="text" style="width: 100px;" name = "dx2">
        <input type="text" style="width: 100px;" name = "dy2"><br><br>
        <span>Viscosity</span><br>
        <span class="vx">X</span>
        <span>Y</span><br>
        <input type="text" style="width: 100px;" name = "vx1">
        <input type="text" style="width: 100px;" name = "vy1"><br>
        <input type="text" style="width: 100px;" name = "vx2">
        <input type="text" style="width: 100px;" name = "vy2"><br><br>
        <span>Inside diameter: </span>
        <input type="text" style="width: 100px;" name = "diameterInput"><br><br>
        <span>Velocity: </span>
        <input type="text" style="width: 100px;" name = "velocityInput">
        <br><br>
        <input type="submit" value="Calculate">
    </form>

    <p id = "validation">
    <p id = "density"></p>
    <p id = "viscosity"></p>
    <p id = "diameter">
    <p id = "velocity">
    <p id = "nre"></p>

</body>

</html>

Solution

<!DOCTYPE html>
<html>

<head>
    <title>Determination of Water Flow in a Pipe</title>

    <style>
        h1 {
            text-align: center;
        }

        form {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
        }
    </style>

    <script>
        var mwInput, tInput, dx1, dx2, dy1, dy2, vx1, vx2, vy1, vy2, diameterInput, velocityInput;
        var validationText, densityResult, viscosityResult, nreResult, diameterResult;

        function calculate() {
            mwInput = document.forms["inputs"]["mwInput"].value;
            tInput = document.forms["inputs"]["tInput"].value;
            dx1 = document.forms["inputs"]["dx1"].value;
            dx2 = document.forms["inputs"]["dx2"].value;
            dy1 = document.forms["inputs"]["dy1"].value;
            dy2 = document.forms["inputs"]["dy2"].value;
            vx1 = document.forms["inputs"]["vx1"].value;
            vx2 = document.forms["inputs"]["vx2"].value;
            vy1 = document.forms["inputs"]["vy1"].value;
            vy2 = document.forms["inputs"]["vy2"].value;
            diameterInput = document.forms["inputs"]["diameterInput"].value;
            velocityInput = document.forms["inputs"]["velocityInput"].value;

            densityResult = (+dy1 + (+tInput - +dx1) * ((+dy2 - +dy1) / (+dx2 - +dx1))) * +mwInput;
            viscosityResult = (+vy1 + (+tInput - +vx1) * ((+vy2 - +vy1) / (+vx2 - +vx1))) * (0.000001);
            diameterResult = +diameterInput * (0.0254);

            nreResult = (+diameterResult * +velocityInput * +densityResult) / (+viscosityResult);

            document.getElementById("density").innerHTML = "ρ = " + densityResult;
            document.getElementById("viscosity").innerHTML = "μ = " + viscosityResult;
            document.getElementById("diameter").innerHTML = "D = " + diameterResult;
            document.getElementById("velocity").innerHTML = "V = " + velocityInput;
            document.getElementById("nre").innerHTML = "Nre = " + nreResult;
        }
    </script>

</head>

<body>
    <h1>Determination of Water Flow in a Pipe</h1>
    <form name="inputs" action="javascript:calculate();">
        <span>MW of Substance: </span>
        <input type="text" style="width: 100px;" name="mwInput"><br><br>
        <span>Enter value of T: </span>
        <input type="text" style="width: 100px;" name="tInput"><br><br>
        <span>Density</span><br>
        <span>X</span>
        <span id="dy">Y</span><br>
        <input type="text" style="width: 100px;" name="dx1">
        <input type="text" style="width: 100px;" name="dy1"><br>
        <input type="text" style="width: 100px;" name="dx2">
        <input type="text" style="width: 100px;" name="dy2"><br><br>
        <span>Viscosity</span><br>
        <span class="vx">X</span>
        <span>Y</span><br>
        <input type="text" style="width: 100px;" name="vx1">
        <input type="text" style="width: 100px;" name="vy1"><br>
        <input type="text" style="width: 100px;" name="vx2">
        <input type="text" style="width: 100px;" name="vy2"><br><br>
        <span>Inside diameter: </span>
        <input type="text" style="width: 100px;" name="diameterInput"><br><br>
        <span>Velocity: </span>
        <input type="text" style="width: 100px;" name="velocityInput">
        <br><br>
        <input type="submit" value="Calculate">
        <div class="answers">
            <p id="validation"></p>
            <p id="density"></p>
            <p id="viscosity"></p>
            <p id="diameter"></p>
            <p id="velocity"></p>
            <p id="nre"></p>
        </div>
    </form>


</body>

</html>
Answered By: Anonymous

Related Articles

Disclaimer: This content is shared under creative common license cc-by-sa 3.0. It is generated from StackExchange Website Network.

Leave a Reply

Your email address will not be published. Required fields are marked *