Question

我有以下代码，我想在父div中居中对齐span和div。我怎样才能实现它？如果我给出左侧和绝对位置，则在平板电脑上对齐会发生变化，需要进行媒体查询。没有它，有什么办法可以解决它吗？

<div>
    <span  data-toggle="toggle">
        <input class="button" data-on="On" data-off="Off" type="checkbox">
        <div class="toggle-group">
            <label class="btn btn-primary toggle-on">
                On
            </label>
            <label class="btn btn-default toggle-off active">
                Off
            </label>
            <span class="toggle-handle btn btn-default"></span>
        </div>
    </div>
</div>

Answer 1

使用text-align: center

.wrapper > span{display:block; text-align:center}
.wrapper > div{text-align:center}
.wrapper > div > div{display: inline-block}

<强> Demo updated

以单行显示子跨度和div

.wrapper{text-align:center}
.wrapper div{display:inline-block}

<强> Demo 2

Answer 2

你想要这个吗？

div.btn-default {
  text-align: center;
}
div.toggle-group {
  display: inline-block;
}

<div> <span class="band-charging-icon charge-not-created" title="Nothing created/set (reservation not checked in)" ng-class="{'charge-not-created':!guest.chargingAccoundId || !guest.chargeAccountAvailable, 'charge-pin-set':guest.chargingAccoundId &amp;&amp; guest.chargeAccountAvailable  &amp;&amp; guest.pinAvailable, 'charge-pin-not-set':guest.chargingAccoundId &amp;&amp; guest.chargeAccountAvailable &amp;&amp; !guest.pinAvailable}"></span> 
  <div class="toggle btn btn-default off disabled" title="Charging Privileges Off" ng-click="guest.chargingAccoundId &amp;&amp; guest.chargeAccountAvailable &amp;&amp; toggler()(guest)" ng-class="{'btn-default off disabled': !guest.chargeAccountAvailable || !guest.chargingAccoundId, 'btn-default off': (guest.chargingAccoundId &amp;&amp; guest.chargeAccountAvailable &amp;&amp; !guest.chargingPrivileges), 'btn-primary': (guest.chargingAccoundId &amp;&amp; guest.chargeAccountAvailable &amp;&amp; guest.chargingPrivileges)}"
  data-toggle="toggle">
    <input class="magic-band-charge-toggle-button" data-on="On" data-off="Off" type="checkbox">
    <div class="toggle-group">
      <label class="btn btn-primary toggle-on" ng-class="{'active': guest.chargingPrivileges}">On</label>
      <label class="btn btn-default toggle-off active" ng-class="{'active': !guest.chargingPrivileges}">Off</label><span class="toggle-handle btn btn-default"></span> 
    </div>
  </div>
</div>

如何居中对齐跨度后跟div中的div

2 个答案: