Saya ingin memusatkan semua isinya tetapi saya tidak tahu bagaimana karena saya bukan Tuhan di CSS. Saya mencoba mencari online dan menemukan display: flex; justify-content: center;}}}}, tetapi ketika saya mencoba mereka bekerja dengan baik tetapi apa yang saya inginkan adalah memusatkan formulir di bawah h1 dan ketika saya Klik Hitung Tombol jawabannya akan tepat di bawah tombol Hitung. Tetapi hal-hal tidak berjalan dengan benar. Ketika saya mengklik tombol hitung, jawabannya muncul di sisi kanan formulir yang bukan yang saya inginkan dan juga saya ingin memusatkan formulir di bawah h1.

Ini semua kode saya:

<!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> 
-1
akolangto 29 Mei 2021, 01:21

3 jawaban

Jawaban Terbaik
<!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>
1
Nikita 28 Mei 2021, 22:34

Inilah kode Anda yang sama menggunakan bootstrap, dengan cara ini Anda harus mendapat manfaat, terlihat lebih baik dan Anda dapat menggunakan beberapa kelas CSS bawaan, tidak perlu melakukan CSS sendiri (pasti harus mempelajarinya!)

Hal-hal yang perlu diingat:

  • Gunakan wadah, baris untuk tata letak halaman Anda
  • Gunakan d-flex justify-content-center ke elemen tengah dalam div
  • Anda dapat mengunduh bootstrap jika Anda membutuhkannya untuk menjadi bagian dari halaman Anda dan sertakan

Periksa:


<!DOCTYPE html>
<html>
<head>
    <title>Determination of Water Flow in a Pipe</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <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>
    <div class="container">
        <div class="row d-flex justify-content-center">
            <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>
        </div>
        <div class="row d-flex justify-content-center">
            <p id = "validation">
            <p id = "density"></p>
            <p id = "viscosity"></p>
            <p id = "diameter">
            <p id = "velocity">
            <p id = "nre"></p>
        </div>
    </div>
</body>

</html> 
1
DevRacker 28 Mei 2021, 22:38

Opsi 1: Tambahkan arah fleksibel diatur ke kolom dalam gaya tubuh Anda

<style>
    body{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
</style>

Opsi 2: Gunakan kombinasi lebar dan margin maks

<style>
    body{
      max-width: 400px;
      margin: 20px auto;
    }
</style>
2
Jude Francis 28 Mei 2021, 22:41