cfml 页面中带 css 的中心复选框

Question

我在使用 css 时遇到了一个非常基本的问题。它不会让我在页面中间居中我的复选框。复选框实际上是 coldfusion，但应该是一样的。

myform.cfml:

.myform {
  position: relative;
  padding: 2rem;
  margin-left: auto;
  margin-right: auto;
}

.checkboxes {
  background-color: blue;
}

<div class="myform">
  <cfform action="landing.cfml" method="post">

    <div class="checkboxes">
      <cfoutput query="animals">

        <input type="checkbox" name="myDataList" value="#animals#" <cfif listFind(selectedAnimals, animalid)></cfif>> #animalname# <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 水平放置在中心。

Answer 1

您可以尝试在 justify-content: center;

父级上使用 display: flex;

.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>

cfml 页面中带 css 的中心复选框

Center check boxes with css in cfml page

html

css

checkbox

responsive-design