CODEWITHSUNDEEP
htmlcss
HerrimanCoder
HerrimanCoder

Reputation: 7218

Unable to center DIVs within HTML Form

I've had no luck trying to center these 2 divs. I've tried the suggestion in this SO post with no success. I've also experimented with margin: auto and width: 50%. That gets me close, but it's not very centered, and when I adjust the width, the Disabled switch div ends up wrapping awkwardly to the next line, in spite of trying text-align: center.

enter image description here

<form method="post" action="Invitation.php" onsubmit="return checkForm(this)">
   <div style="width: 100%">
      <div style="margin-left:auto;margin-right:auto">
         <!-- Manual switch -->
         <div class="flipswitch" style="float: left">
            <input type="checkbox" name="flipswitchRecurring" id="flipswitchRecurring" class="flipswitch-cb" onclick="flipSwitch(this)">
            <label class="flipswitch-label" for="flipswitchRecurring">
               <div class="flipswitch-inner"></div>
               <div class="flipswitch-switch"></div>
            </label>
         </div>
         <!-- Disabled switch -->
         <div class="flipswitch2" style="float: left; margin-left: 35px">
            <input type="checkbox" name="flipswitchEnabled" id="flipswitchEnabled" class="flipswitch2-cb">
            <label class="flipswitch2-label" for="flipswitchEnabled">
               <div class="flipswitch2-inner"></div>
               <div class="flipswitch2-switch"></div>
            </label>
         </div>
      </div>
   </div>
</form>

How can I center these 2 DIVs?

Upvotes: 2

Views: 76

Answers (2)

ohiodn8
ohiodn8

Reputation: 46

Modification to your code (Added text-align:center and display:inline-block) => 

<form method="post" action="Invitation.php?AccessCode=5GR1A67833Y7W98UW8546FJM8" onsubmit="return checkForm(this)">
   <div style="width: 100%">
      <div style="text-align: center;">
         <!-- Manual switch -->
         <div class="flipswitch" style="display: inline-block;">
            <input type="checkbox" name="flipswitchRecurring" id="flipswitchRecurring" class="flipswitch-cb" onclick="flipSwitch(this)">
            <label class="flipswitch-label" for="flipswitchRecurring">
               <div class="flipswitch-inner"></div>
               <div class="flipswitch-switch"></div>
            </label>
         </div>
         <!-- Disabled switch -->
         <div class="flipswitch2" style="display: inline-block;">
            <input type="checkbox" name="flipswitchEnabled" id="flipswitchEnabled" class="flipswitch2-cb">
            <label class="flipswitch2-label" for="flipswitchEnabled">
               <div class="flipswitch2-inner"></div>
               <div class="flipswitch2-switch"></div>
            </label>
         </div>
      </div>
   </div>
</form>

Upvotes: 1

Jeremy Thille
Jeremy Thille

Reputation: 26360

As usual, what is a pain with classic CSS (float, inline-block, etc.) is a breeze with Flexbox.

form {
  border: blue dashed 2px;
}

.centrer {
  display: flex;
  justify-content: center;
}

.switchBlock {
  border: red dashed 2px;
  width: 100px;
}

.switchBlock:nth-child(2) {
  margin-left: 35px;
}
<form method="post" action="Invitation.php?AccessCode=5GR1A67833Y7W98UW8546FJM8" onsubmit="return checkForm(this)">

  <div class="centrer">
  
    <!-- Manual switch -->
    <div class="switchBlock flipswitch">
      <input type="checkbox" name="flipswitchRecurring" id="flipswitchRecurring" class="flipswitch-cb" onclick="flipSwitch(this)">
      <label class="flipswitch-label" for="flipswitchRecurring">
               <div class="flipswitch-inner"></div>
               <div class="flipswitch-switch"></div>
            </label>
    </div>
    <!-- Disabled switch -->
    <div class="switchBlock flipswitch2">
      <input type="checkbox" name="flipswitchEnabled" id="flipswitchEnabled" class="flipswitch2-cb">
      <label class="flipswitch2-label" for="flipswitchEnabled">
               <div class="flipswitch2-inner"></div>
               <div class="flipswitch2-switch"></div>
            </label>
    </div>
    
  </div>
  
</form>

Upvotes: 1

Related Questions