How to make check boxs in the center align instead of left align?-CodePudding

<div >
        <div style={{display: 'flex'}}>
          <IndeterminateCheckbox {...getToggleHideAllColumnsProps()} /> Toggle
          All
          {allColumns.map((column) => (
            <div key={column.id}>
              <label>
                <input type="checkbox" {...column.getToggleHiddenProps()} />{
                  ' '}
                {column.Header}{' '}
              </label>
            </div>
          ))}
        </div>
      </div>

check boxs is print in left align

How to make check-boxs in the center align instead of left align?

CodePudding user response：

instead of using flex improperly here, set display:inline-block, width:auto, text-align:center to wrapper div this will make the whole wrapper div center aligned

CodePudding user response：

You mean something like this?? This is an example.

.allinputs{
   display:flex;
   justify-content:space-evenly;
  
   }

.myinputs {
   display:grid;
   }

<div >
 <div >
  <label> Toggle All </label>
  <center>
  <input type="checkbox">
  </center>
 </div>

 <div >
  <label> Device Id </label>
  <center>
  <input type="checkbox">
  </center>
  </div>
  
   <div >
  <label> Water Temperature </label>
  <center>
  <input type="checkbox">
  </center>
  </div>
  
   <div >
  <label> Air Temperature</label>
  <center>
  <input type="checkbox">
  </center>
 </div>
 
</div>