Question

我没有运气试图将这两个div中心化。我在this SO post尝试了这个建议但没有成功。我还尝试了margin: auto和width: 50%。这让我很接近，但它并不是非常集中，当我调整宽度时，禁用开关div最终会笨拙地包裹到下一行，尽管尝试text-align: center。

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

我如何将这两个DIV集中在一起？

Answer 1

与往常一样，使用经典CSS（浮动，内联块等）的痛苦对于Flexbox来说是轻而易举的。

＆＃13;

pollingObserveDriver

＆＃13;

public class CustomerContactCommunicationValidator : AbstractValidator<CustomerCommunication>
{
   public CustomerContactCommunicationValidator()
   {
       RuleForEach(x => x.PhoneNumbers).Length(0, 35);
       RuleForEach(x => x.FaxNumbers).Length(0, 35);
   }
}

＆＃13;

Answer 2

修改代码（已添加text-align:center和display:inline-block）=＆gt;

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

无法在HTML表单中居中DIV

2 个答案: