[英]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.