[英]How can I center all my contents in html?
我想集中我所有的内容，但我不知道怎么做，因为我不是 css 的神。 我尝试在网上搜索，发现display: flex; justify-content: center; align-items: center; ，但是当我尝试它们时它工作正常，但我想要的是将表单置于h1下方，当我单击计算按钮时，答案将 go 位于计算按钮的正下方。 但事情不 go 对。 当我单击计算按钮时，答案会显示在表单的右侧，这不是我想要的，而且我想将表单居中在h1下。
这是我所有的代码：
<!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：将 flex-direction 设置添加到您的正文样式中的列
<style>
body{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
</style>
选项 2：使用最大宽度和边距的组合
<style>
body{
max-width: 400px;
margin: 20px auto;
}
</style>
<!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>
这是您使用引导程序的相同代码，这样您必须受益，它看起来更好，您可以使用几个内置的 css 类，无需自己编写 css （绝对应该学习它！）
认为要记住：
d-flex justify-content-center使 div 中的元素居中查看：
<!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>
在HTML表格中，如何将单元格的内容（而不是表格本身）居中？
[英]In an HTML table, how can I center the contents of the cells (not the table itself)?
为什么我的SVG图像的内容消失了？ 以及如何使它居中并使其适合盒子中的物品？
[英]Why did the contents of my SVG image disappear? And how can I center it and get it to fit the contents of the box?
我如何解析/编译/解析我的angularjs指令中包含的html的内容
[英]How can I parse/compile/resolve the contents of contained html in my angularjs directives
如何使用gulp-inject将文件的内容插入到index.html中？
[英]How can I insert the contents of a file in my index.html with gulp-inject?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.