How can I center all my contents in html?
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
Disclaimer: This content is shared under creative common license cc-by-sa 3.0. It is generated from StackExchange Website Network.
