我希望 div 的元素位于螢屏的中心,而不是其中的文本。例如Sample size (n)應該在下面的代碼中左對齊。
.center-screen {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
<div class='center-screen'>
<label class='input2' for='pop'><b>Population proportion (p)</b></label>
<input class='input2' type='number' step='0.01' id='pop' value='0.43'/>
<label class='input2' for='samplesize'><b>Sample size (n)</b></label>
<input class='input2' type='number' id='samplesize' value='40'/>
<input class='input2' type='button' value='Calculate' />
</div>
uj5u.com熱心網友回復:
你可以用一個 div flex 容器包裹起來。然后你只對齊子容器。然后從子容器中洗掉文本對齊。
.container {
display: flex;
justify-content: center;
}
.center-screen {
display: flex;
flex-direction: column;
justify-content: center;
}
<div class="container">
<div class='center-screen'>
<label class='input2' for='pop'><b>Population proportion (p)</b></label>
<input class='input2' type='number' step='0.01' id='pop' value='0.43'/>
<label class='input2' for='samplesize'><b>Sample size (n)</b></label>
<input class='input2' type='number' id='samplesize' value='40'/>
<input class='input2' type='button' value='Calculate' />
</div>
</div>
轉載請註明出處,本文鏈接:https://www.uj5u.com/yidong/453130.html
上一篇:引導寬度溢位,不適合形成內容
下一篇:如何創建隱藏/顯示切換
