Center check boxes with css in cfml page

January 27, 2022

I’m having a really basic issue with css. It won’t let me centre my checkboxes in the middle of the page. The checkboxes are actually coldfusion, but should work the same.

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>

I coloured the background of the checkboxes aquamarine to see how it lies. It spreads across the whole screen. margin: auto; or margin: 0 auto; make no difference. It also doesn’t matter if the margin: auto; is in the .myform or the .checkboxes, it still doesn’t work. If I change it to margin-left: 30rem; margin-right:30rem; it moves, but I can’t have an absolute positioning.

Everything I have read says to use margin: auto; and it should position the div in the centre horizontally.

>Solution :

You can try using display: flex; on the parent with justify-content: center;

.myform {
  position: relative;
  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>