我對css有一個非常基本的問題。它不會讓我將復選框居中在頁面中間。復選框實際上是冷融合,但應該是一樣的。
myform.cfml:
.myform {
position: relative;
padding: 2rem;
margin-left: auto;
margin-right: auto;
}
.checkboxes {
background-color: aquamarine;
}
<div class="myform">
<cfform action="landing.cfml" method="post">
<div class="checkboxes">
<cfoutput query="toolIds">
<input type="checkbox" name="myDataList" value="#toolid#" <cfif listFind(selectedTools, toolid)></cfif>> #toolname# <br />
</cfoutput>
</div>
<cfinput type="Submit" name="SubmitForm" value="Submit">
</cfform>
</div>
我為復選框海藍寶石的背景著色,以查看它的位置。它遍布整個螢屏。margin: auto;或margin: 0 auto;沒有區別。如果margin: auto;.myform 或 .checkboxes 中也沒有關系,它仍然不起作用。如果我把它改成它margin-left: 30rem; margin-right:30rem;會移動,但我不能有絕對定位。
我讀過的所有內容都說要使用margin: auto;,它應該將 div 水平放置在中心。
uj5u.com熱心網友回復:
您可以嘗試display: flex;在父母上使用justify-content: center;
.myform {
position: relative;
right: 0; /* Fill in a positive value here, to push to left */
padding: 2rem;
margin-left: auto;
margin-right: auto;
display: flex;
justify-content: center;
}
.checkboxes {
background-color: aquamarine;
}
<div class="myform">
<cfform action="landing.cfml" method="post">
<div class="checkboxes">
<cfoutput query="toolIds">
<input type="checkbox" name="myDataList" value="#toolid#" <cfif listFind(selectedTools, toolid)></cfif>> #toolname# <br />
</cfoutput>
</div>
<cfinput type="Submit" name="SubmitForm" value="Submit">
</cfform>
</div>
轉載請註明出處,本文鏈接:https://www.uj5u.com/qukuanlian/422196.html
標籤:
上一篇:在小視口中出現在彼此前面的引導行
下一篇:如何水平對齊這兩個日期欄位?
